This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Use the React Router v4 Link Component for Navigation Between Routes

2:01 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Mike

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

Avatar
Joseph

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.

In reply to Mike
Avatar
Jon

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?

Avatar
Joseph

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.

In reply to Jon

We can create navigation elements for a router by bringing in the component from the React Router library. You can see here I've got three paths -- one for Home, About, and Contact. We're here on the Home path. If I go to /about, we get our About, and likewise for Contact.

To use the component, I'm going to go ahead and create a new component here called . I'm going to wrap everything up in a tag. We're going to go ahead and put our component on the page. This works a lot like an anchor tag with the exception that rather than an href we have a to prop.

I'm going to say to/, and then inside of that component I'm going to go ahead and give it some text that says Home. We can add our component to our app component. Now we've got our component. We click on Home, and we've got our Home component.

I'm going to go ahead and add another one of these for our About page. This time, rater than passing in a string, we're going to interpolate an object. There's a few things we can do here, but the to prop becomes pathname, so we'll set this to /about, save that. Now we've got an About link.

We're going to go ahead and add one more for our Contact page, save that. Now we've got our three links -- Home, About, and Contact.

One other thing we can do here is called replace. This gives us a little control over how we're managing our browser history. By using replace here, if I go to Home and then About, and I click Back, it's going to take me to Home.

If I go to Home, About, and then Contact, you might think that it's going to take me to About, but what we've done by adding this replace modifier is we've replaced the previous URL with the new URL. When I hit Back, it's going to go all the way to Home.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?