Complete Intro to React, v7 React Router Link

Transcript from the "React Router Link" Lesson

[00:00:00]
>> Let's head over to your details page and let's make it a little bit more interesting to work with. No, we're not gonna do that, we're gonna do pets first. So let's go to pet.js. So let's discuss a problem that we have yet right now. This is not a problem, this is art right there.

[00:00:24] [LAUGH] So on this page, if I click on Luna right now, it will take me to the correct page, but it's actually doing a full page refresh. I'm pretty sure it is. That's it. A good question, but I think it is doing a full page refresh. Now, what would be better and what would allow us to worry less about is if react router could take care of all that stuff for us.

[00:00:58] I don't think it always does a full page refresh, but I think it has the potential to do a full page refresh, which you don't wanna do if you're doing a single page application. So instead of using an a tag here, what we wanna use is a link component from react router.

[00:01:16] So basically, instead of this a here, oops, I'm going to put a link and link. And instead of saying href, they want you to say to, Now, the end result of what comes out of link is still an anchor tag, an a tag, right? But now, it has a bunch of additional logic.

[00:01:43] So for example, if I move this component around, its relative path will always be correct to whatever browser router context it's in. So one, that's a huge benefit. And it handles a bunch of stuff with relation to react router that we don't have to worry about as long as we use link texts instead of aText.

[00:02:03] So now, if we go back over here and refresh the page, go back to the homepage, Notice that everything still works the same. If you look at it, it's still a a tag. That's not coming up, but you can trust me that it's an a tag. Why is doing that?

[00:02:26] That's unfun. In any case, there we go. So that's it. As long as you're doing internal links to your website, just use the link component instead of aText. Notice here that I'm still giving it a class name. Whatever you do there, it'll just pass along, so you can absolutely give it an ID or whatever you need to do there as well.

[00:02:54] Okay, why are you upset? This needs a key cuz I deleted it earlier. Put it back, okay.
>> And about the link component-
>> Mm-hm.
>> So fundamentally, what it's doing, it's just loading. How do you describe what it's doing really? Again, just we're loading our subsequent components, but not the main App js.

[00:03:15] Cuz I think what we accomplished there was we're not refreshing the whole page, right? We're refreshing-
>> All right, that part, yes. So it's just gonna manage the internal navigation for you and you don't have to worry about it. And probably just as importantly is, right now, we only have one router and one layer of nesting here, which is honestly gonna be fairly frequently the case for most of you.

[00:03:37] But certainly, if you had multiple different layers, that could be problematic. So it could handle all that stuff for you as well. Constructing the URLs, basically, is what I'm trying to say. Now, one thing that is a foot gun that I'm just gonna put out there for you is, let's say I had this h1 outside here, and I wanted to put like a link tag in here.

[00:03:58] I can't, because outside of browser router. So anytime that you're using a link tag, it has to be inside a browser router, yeah.
>> Are there times where you would use an anchor tag instead of the link?
>> I mean, if you're going to link to a third party, that would be a good example of one to.

[00:04:24] But internal to your app, probably not. Yeah, none that I can think of. Okay, let's go over to Details.js, and here react router 6 now only exposes a hooks API. They used to have an older, you'd call them higher order components sort of API, and they just ditched it totally.

[00:04:49] I have mixed feelings on that. I'll leave it at that anyway. So, but the hooks API is very nice. So up here at the top, I wanna say import {useParam}, From react-router-dom. And so what I'm trying to do here is I wanna get that ID, right? So if you go back and look at your App.js, I want this, right?

[00:05:23] How do I get that inside of my Details route? Well, if I go look at details, I can say const (id) = useParams, like that. And it's a little magical, right, a little black boxy here. But because it's inside of a browser router, it can say, I'm a route, right, and I can pull stuff out of my route.

[00:05:53] So therefore, this is just gonna automatically work. So now, this will pull whatever the id is off of useParams. So instead of this, just for fun, we can say id. And now if we go back over to our Details page and refresh here, notice this is 1, This is 7, 9, right?

[00:06:22] So this is matching whatever. I mean, you can put literally any thing you want here, and it'll put that right there, right?
>> What about the exact keyword?
>> I believe the exact keyword went away. That one I'd have to look up, but that was in react router 5.

[00:06:43] So there used to be a thing with react router, That if you wanted to only match the homepage, you had to put exact here to say, don't match things that have subsequent matching sort of things here. And I believe that went away with react router 6, because now it only matches one route every time no matter what anywhere.

[00:07:11] So we're gonna go back to adopt me. So we're gonna go to the App.js here. And we're gonna put a link in here as well. And we're gonna make this h1 here clickable. So I'm gonna put this in a header tag, cuz why not? We'll move this inside of here.

[00:07:36] And we'll just, instead of having this be an h1, we'll just make it a link. And we'll just have this go to the homepage, Like that. So now, we'll have a clickable header that users can use. And I did change it from an h1 to a link tag, but that's fine.

[00:08:02] I wrote the CSS, so it'll still work.