React Router is a package that allows you to configure certain URLs to show certain components.

For example, if you had a user profile component you could setup a route so that when the user clicks User Profile in the navigation bar, the user profile component gets rendered.

To install React Router run npm install react-router-dom --save in your React project folder.

Then, in the relevant .js file, import the following elements import {BrowserRouter, Route, Link} from 'react-router-dom';

The key components of React Router are:

  1. Routes are configured in a <BrowserRouter> component.
  2. The <Link> component is used to redirect to a particular path, e.g. /about.
  3. Each Route is configured using <Route> components which specify which paths redirect to which Components.

See the example code below, which would result in this behaviour.

React router demo

Or using the class style React Components: