Use the React Router v4 Link Component for Navigation Between Routes

Joe Maddalone
InstructorJoe Maddalone

Share this video with your friends

Send Tweet

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.

Mike
Mike
~ 4 years ago

Can you give a real-world example for when replace would be used in navigation?

Joe Maddalone
Joe Maddaloneinstructor
~ 4 years ago

There are many situations where it could be useful. Perhaps you have a nested navigation where you want the browser's back button to return to the previous parent url. -- maybe in a modal, or an image gallery... lot's of possibilities.

Jon
Jon
~ 4 years ago

Do the corresponding Links and Routes need to be in the same lexical scope? Example:

//index.js
import App from './App'
import Signin from './Signin'
...
<Router>
  <div>
    <Route path='/' component={App}></Route>
    <Route path='/signin' component={Signin}/>
  </div>      
</Router>

//App.js
Import Header from './Header.js'
...
<div>
	<Header/>
</div>
...

//Header.js
<nav>
    <ul>
        <Link to='/signin'>Sign in</Link>
    </ul>
</nav>

I had tried making a route change to the route /signin from a nested component, and although it would go to the route within the "to" parameter, it wouldn't render the component until I refreshed the page. Does anyone know if this is an issue or a feature?

Joe Maddalone
Joe Maddaloneinstructor
~ 4 years ago

Without a detailed review of your code it could be multiple issues. However, as you've presented it here App & Signin should both render at /signin. As just a random thing to try - <Route exact path='/' component={App}></Route> to see if the two components are conflicting somehow.

Dwayne
Dwayne
~ 4 years ago

Is it possible to have several routes on one page, like in a single scrolling webpage that has each section take up 100vh of the users window?