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

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