React routing

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.

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

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

// 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:

// 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.

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.

<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.