Learning React Router: Part 1: Installing and Configuring

Learning React Router

React Router (DOM) allows developers to create multiple-page projects with React through supporting using components as ‘pages’ for different URL routes.


Installing

React Router comes in two different configurations. For working with web applications, as this guide will cover, the “dom” configuration is needed.

It can be added to any existing React project through running the following command within a project’s root directory:

npm install react-router-dom

Configuring

Once added to a project, there are additional steps to be taken. The first of which is understanding that components can now be thought of as “pages” and, from there, thinking through how to organize a project for different routes.

For example, for an application with <User> and <About> components, it might sense to separate these into their own routes “/user” and “/about”.

The second step, with one or more routes planned, is to import the BrowserRoute, Switch, and Route objects from “react-router-dom” into the “index.js” file. This will serve as the center routing location for the application.

Whenever a request for a URL comes to the application, it will be parsed into its parts and served to defined routes. These are setup inside a <BrowserRouter> component with a <Switch> component including an individual <Route> component per defined route.

Consider the following code:

<BrowserRouter>
    <Switch>
        <Route path="/about">
            <About />
        </Route>
        <Route path="/user">
            <User />
        </Route>
        <Route path="/">
            <App />
        </Route>
    </Switch>
</BrowserRouter>

In the above code, each route is part of its own <Route> component and includes a property, path, that defines it. Inside of the route is the component to show to the user. For example, for the route “/about”, the component <About> will be used.

The above code should be part of the “index.js” file and, in fact, should be the first (and only) thing rendered by a called to ReactDOM.render().

Consider this extended example:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import App from './App';
import About from './components/about';
import User from './components/user';

const routes = 
<BrowserRouter>
    <Switch>
        <Route path="/about">
            <About />
        </Route>
        <Route path="/user">
            <User />
        </Route>
        <Route path="/">
            <App />
        </Route>
    </Switch>
</BrowserRouter>;

ReactDOM.render(routes, document.getElementById('root'));

In the above code, any component used is imported from its source directory. A <BrowserRouter> is setup with each individual <Route> defined via its path property.

When run, the first component shown would be <App>. Directly visiting the other routes, “/user” and “/about”, would show those components.