If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen.

Import Link:

import {    BrowserRouter as Router,    Route, Link} from ‘react-router-dom‘;

Add Nav section to the page

const Nav = () => (  <nav>      <Link to="/">Home</Link>      <Link to="/about">About</Link>      <Link replace to={{pathname: ‘/contact‘}}>Contact</Link>  </nav>);

There are two ways to nav to another page.

1. to="/about"

2. to={{pathname: ‘/contact‘}}

Here the ‘replace‘ keyword able to help modify pushHistory. Once you use ‘replace‘ it will replace previous state to current state, instead of add one state.

For example.

Current history: [‘/‘, ‘/about‘, ‘/contact‘], in the normal case, you hit the ‘Back‘ button in your browser it will bring you back to ‘/about‘.

But once you use ‘replace‘, it will replace [‘/‘, ‘/about‘] to [‘/‘, ‘/contact‘]. So you when hit ‘Back‘ button , you will back to ‘/‘.

[React Router v4] Use the React Router v4 Link Component for Navigation Between Routes