How it works :

First : You need to install react-router-dom . It is the package used to implement the routing process in your web application.

yarn add react-router-dom

Second : You will import the meaningful parts from this package.

import { BrowserRouter } from 'react-router-dom' in index.js

import { NavLink } from 'react-router-dom' in your navigation component

import { Route } from 'react-router-dom' in your display component

Third : Wrap your App component (inside index.js ) inside a BrowserRouter

<BrowserRouter>

<App />

</BrowserRouter>

This is how the magic happens. React Router uses this component to make your application aware of the navigation (history, current path, etc).

Fourth : Fill your navigation component using NavLink items.

<NavLink exact to="/url">Menu item</NavLink>

NavLink is different from Link because it handles the active class-naming. It lets you customize appearance of active links based on the current URL, automatically.

The exact property will tell React Router to add active to the link only if the path is identical as the one given in the to property.

The to property is where the user will be redirected when clicking this link.

Finally : Fill your display component with Route items.

<Route exact path="/url" component={Component} />

Route is just a conditional rendering component.

It will render the Component given in the component property, only if the current path is identical ( exact ) to the path property.