This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "React Router Route" Lesson
[00:00:00]
>> So in previous versions of this course I taught older versions of react router and reach router. They're all from the same people. But they do vary pretty considerably. And the one thing that I'll say about react router that might be a minor frustration to some of you is the version three, version four and version four, for version five or wildly different.
[00:00:24] And they're require rewriting your application can be a bit of a point of frustration, but it's also by far the best router. So it's kinda hard not to use it. So in this particular case, we're gonna be teaching react router five today. And I'll say that react router six is about to come out, and there's gonna be some variation from that as well.
[00:00:44] So look forward to taking the intro to react to these seven, I'm sure we'll cover that. They're not that different and for the purposes of this course, it doesn't actually vary that much, in version five of this course I taught reach router, and updating that to react router version five didn't take a lot of work.
[00:01:04] So just be aware of that. But yeah, we're gonna be talking about react router version five today. Okay, we already have one route in our application. If we head back over to our app.js, you can see we have a search params route. Now right now, that's all we have.
[00:01:26] But we won't be able to switch between the two different pages, right? We wanna have a SearchParams page and we wanna have a details page. So the first thing that we wanna do, Let's go install our version of react router that we want. I didn't take a note here.
[00:01:46] So let's go ahead and make sure that we get the correct one. So I'm gonna look in my page here. We're gonna look at the package JSON and we're going to get react router Dom 5.2.0. So come back over to your page here, and I'm just gonna create a new terminal here.
[00:02:12] And I'm gonna say npm install react-router-dom. It's the Windows version, right? They also have a React Native version and we only care about the dom version right now. @5.2.0. Okay, so now we should have react router DOM. And the first thing I want you to do is I'm going to go create a new page called details.
[00:02:45] So create a new file in your source directory called details.js. This would be if I click on Luna I wanna see all the details about Luna. So let me say const details equals arrow function, return an h2 of high or whatever you wanna say. Here we go, much more appropriate.
[00:03:17] And then we're going to export default, Details. Okay, so basically the best react component we've ever made, can probably end the course on this, no, I'm just kidding. We go back to app.js. And we're going to import, Details from ./details. So now we wanna conditionally render, sometimes SearchParams and sometimes details.
[00:03:52] So we're gonna do that with the library react router dom. So we're going to import browser router, and I'm just gonna import that as a router, that's just renamed it to router. It makes a little bit easier for me to read and route from react-router-dom. So now we have two components here router and route, And underneath my adopt me I'm gonna put router, Move SearchParams in there.
[00:04:32] And then we're gonna have two routes in here. We're gonna have route, one with path equal being, /details/:id. And we're gonna put details in here. And then we're gonna put route path = /, I'm going to put SearchParams in there. And mind you, I also imported details at the top.
[00:05:14] So let's get rid of this. Router and inside of there I have two routes. The path = details/:id and path = /. Let's talk about the :id for a second. This is how you do variables inside your routes. So something goes to /detail/3, then that 3 will be passed down as the 3 property to that route.
[00:05:44] So that'll be passed down here to details so that it can read that it's on the three page of details. So yeah, it's just a variable that you can read off of your path. And then this is obviously the whole homepage to slash. Okay, so now if we save this and go over to our page, Everything is still working just fine on the homepage.
[00:06:10] But here's something curious if I go to /details/1. Notice I'm getting both of these. Why is that? Technically, it matches both routes and so because it matches both routes, it's gonna render both routes. Let's talk about why. So when I'm at /details/:id, it matches both routes, but when I just /, it only matches this slash, right?
[00:06:40] So if I go back to the homepage, notice it's empty there. Let's get into why. Well, technically, I'm gonna go back to my notes here for a second so we can look at this. This is how react router does path matching. So if I have one that's gonna match, let's take this URL here /teacher/gem /young.
[00:07:12] That's gonna be matched by /teachers gem and /teacher/gem/young. And the reason for that is that it matches as much as it goes from the left in right? So it's gonna say, does /match/to a point? And the answer is yes. And if it matches /teachers, it does, right, cuz it matches all the way up to here.
[00:07:36] As long as it matches all the way from the left inward, it's gonna consider it matched. But it likely will not match /young, right because it doesn't go for the right, it only goes to the left. Does that kinda make sense? It's useful sometimes. But I actually find it to be kind of annoying behavior but that's the way that they designed it.
[00:07:57] We can get around that and I'm gonna show you in just a second, but I just want you to be aware of that. You can actually match multiple routes at the same time. And this you can do this to do some clever things with it. Maybe on /teachers, we can show some special header.
[00:08:11] And then we can have some route that only matches that and then kind of a different route that matches everything beneath that, blah, blah, blah. There's lots of interesting things you can do with that. So, let's get around that. There's another component that we can import up here called switch.
[00:08:27] And this is basically saying, hey, only match one thing. Only give me the first one and I don't care about the rest of them. So now I can go switch, And I can move that up in here. And now anything that's inside of the switch basically says, give me the first one that matches and that's it.
[00:08:52] Because of the order that we chose for this, this one will match before this one. So now if we go back in here, notice that this one only renders one thing, That will match just that. There you go. Now there's some other things you can do here. For our intents and purposes, this is not a react router course.
[00:09:23] But you can do 404 pages, you can do all sorts of fun stuff like that. Feel free to peruse the react router documents on your own time. Suffice to say this is enough for us to get started.