Check out a free preview of the full Complete Intro to React, v6 course:
The "React Router Link Tag" Lesson is part of the full, Complete Intro to React, v6 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates connecting two pages to each other using a Link tag. Link tags can be used to take the user to an entirely different site or be reconfigured to not reload the page and navigate to a separate component.

Get Unlimited Access Now

Transcript from the "React Router Link Tag" Lesson

[00:00:00]
>> The next thing that we need to do is let's go into pet.js. This is an a tag and once we're using react router, we want to switch everything to using their link tags. So we're gonna import Link from react router DOM and we're just going to switch this a tag here to be link, link.

[00:00:35] And this href instead of calling it a href, they call it two. So just change that to be 2, now why do we do that? Well, if you click that link, it's going to assume that that anchor tag is taking you to a whole separate page. And that's not actually really what we want to happen.

[00:00:55] We wanted to actually capture that navigation so the user doesn't reload the React application and then it doesn't unload, react. So, whereas before it would have reloaded the entire page, now, if If I click one of these links here, notice that it doesn't like flash, right? It's because it's not reloading the page altogether.

[00:01:16] React router is now capturing that routing event that navigation event and it's doing the navigation without reloading the application. This is now a single page application. That's the point of that, but it's important that you have to use links instead of A's to get that behavior, otherwise, it's just gonna say, okay, you're leaving cool.

[00:01:34] I'm going to send you off to a brand new page, and you'll reload the react application every single time, which is probably not what you want. Make sense? Great. Let's go where App.js and let's just make this our link tag as well, so up here, From react-router-dom, just make sure importing the link as well.

[00:02:10] And we're gonna wrap this in a link to equals and we're just gonna have to take you to home cause like when your users click the header, they expect to go back to the homepage. That's just the behavior that we're gonna implement now. And actually, let's put that inside of a header, yeah, cause it's not inside of a header.

[00:02:36] Let's just do that, header. There we go. So now, what disappeared, that's weird. What did we do? Yeah, you have to be inside of the router. So another thing, it's like hey, I put a link tag here but it has no router to refer to, so it's gonna throw me an error.

[00:03:10] So we have to actually move this inside of the router. And now, if you go back over here, it'll be happy again. It's a good piece of technology I've used it in several places, we used it at Netflix. I used to really early version when I was at Reddit.

[00:03:32] It's solid, like lots of really big companies to use, obviously, I think Facebook uses in places as well. It's definitely the most used router.