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

Posted 2020-09-05 Answer1215

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