Use the React Router v4 Link Component for Navigation Between Routes

[00:00] We can create navigation elements for a router by bringing in the <Link> 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.

[00:19] To use the <Link> component, I'm going to go ahead and create a new component here called <Links>. I'm going to wrap everything up in a <nav> tag. We're going to go ahead and put our <Link> 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.

[00:37] 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 <Links> component to our app component. Now we've got our <Link> component. We click on Home, and we've got our Home component.

[00:55] 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.

[01:15] 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.

[01:27] 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.

[01:45] 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.