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