React routing
Tags: react, routing, javascript
Published: 2019-11-19 14:45:28

---
title: React routing
published: true
description: How to navigate between pages in a React application
tags: reactjs, routing, javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191005-router.jpeg
---

## How to navigate between pages in a React application

What happens when we enter a URL in the browser address bar?

Typically, when we enter a URL, our browser sends a request for a document that lives at that URL on a remote server.
The remote server receives our request, creates the HTML document and sends it back to the browser.
The browser receives the document, creates a DOM (Document Object Model, an in-memory representation of the document received) from it and displays it for us to see.

This is the essence of how the World Wide Web works, but loading a full page on every request is an expensive operation that takes time and resources.
React has a way to lighten up the load this operation takes on resources by displaying components instead of full web pages.

*Routing* is the way React uses to load a particular component inside the virtual DOM.
By letting React handle routes we have a way to quickly and efficiently load and display different pages, or views, into our application.

### How do we implement routing?

To use React routing we first need to install the router library, `react-router-dom`, into our project with this command:

```
npm install react-router-dom
```

When the library is installed, we import the router which is called `BrowserRouter` in the library.
This syntax imports `BrowserRouter` and renames it to `Router` inside our module.

```js
import { BrowserRouter as Router } from 'react-router-dom';
```

The next step is to wrap our App component inside the Router component:

```js
// App.js

render ()
  return (
    <Router>

      <div className="App">
        <TodoList todos={this.state.todos} />
      </div>

    </Router>
  );
}
```

In the code above we have placed `Router` inside the return statement of our component.

Another way of doing it is to wrap the whole `App` component by placing `Route` inside `index.js` in this way:

```js
// index.js

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);
```

In order to use the router, we also need to import the `Route` component. The `Route` component lets us define the actual routes that our application has access to.

```js
import { BrowserRouter as Router, Route } from 'react-router-dom';
```

This gives us a `Route` component that we can use to specify the view component to render when we request a certain URL.

The way we render the correct component when we enter a specific URL is controlled by the `path` and the component `props` passed to the `Route` component.

In the example below, we add a `path` prop and we give it a value of `/styling`.
We also add a `component` prop, and we give it a value of `Styling` which is the name of the component we want to render when the `/styling` URL is requested.
This setting ensures that React will load the `Styling` component when it sees the `/styling` URL in the address bar.

```js
<Route path="/styling" component={Styling} />
```

If you enter `/styling` in the address bar in your browser at this point, and hit *Enter*, React will load the `Styling` component.

But entering an URL in the address bar every time we want to change page is not very user friendly. People prefer to click on links for that.
We will learn how to create links to navigate through pages in the next article.