Complete Intro to React, v7 React Router

Transcript from the "React Router" Lesson

[00:00:00]
>> So, we're gonna talk about React Router. So in various permutations of this class, I've taught various versions of React Router as well as Reach Router which was written by the same person but then they merged back into React Router. If that sounds confusing, it's because it's very confusing.

[00:00:17] I do really like React router that's why I continue to teach it the thing that I find frustrating about React router is that it feels like every major version is a wild rewrite of the entire library. So I'm just I'm forewarning you here that if you choose to build React Router into your website, there's a decent chance that V7, V8, V9 of this will be while they're different in the previous one.

[00:00:39] Most of the libraries maintain some semblance and backwards compatibility, and that is not their strong suit over React Router. But it is the best one, objectively, it's very fast, it's very nice to use and they're re-writing it to make it much better. So I'll let you decide on that.

[00:00:59] Now and React router is written by the same people that do remix right remix.run so yeah they are they are very good at routers. I know Ryan I think Michael as well the two authors I also did Ember Router way back in the day, like before React was even out.

[00:01:17] So they've been working on routers for like a decade now. So, it is by far the most popular one in the community. It's the one I'm gonna show you how to use today. I think it's quite good. This is not a React Router of course, I'm gonna kind of, scratched the surface with it here, but there's a lot of depth here that I'm not I'm gonna cover.

[00:01:35] So why would you want a client side router. Well I'm sure many of you have heard of a SPA, write a single page application, and this allows you to basically have a user land on a page. And then when they navigate from page to page on your website they're not actually making a full request to your server they're actually just routing to a different page inside of your JavaScript application.

[00:01:57] This is helpful because they don't have to do like a full like latency kind of first handshake back to your server and have a comeback and all that kind of stuff all over again. It's just all done on on this on your client. So that can be positive.

[00:02:10] It's good for if you have like an, like a real application for something like Netflix is a good example, right? We use React Router when I was at Netflix, because it's an app, right? You're actually moving from page to page, but it's actually different parts of an app.

[00:02:21] If you're doing something like a trying to think like well what a good example would be. I don't know like a like a Wiki page right where it's it actually is just like a web page where every web page is separate maybe a router is not the best idea and you could just server side rendered and sent down to static HTML files.

[00:02:40] That might make more sense. Anyway, I'm trying to just kind of delineate, sometimes you might want a router or sometimes you might just want like a normal web page. And both of those are valid solutions. So we're gonna make the single page application because I imagine many of you will need to do that.

[00:02:55] So I want you to go over to your application and I want you to make a page called details.js. Then I want you to make the most basic thing you can think of, const details equals arrow function and just return, Whatever you want and then export default details.

[00:03:32] So I used to put curse words in there, [LAUGH] And then you can probably finish the rest of the story in your head. [LAUGH] I shipped it to production once at a company, let's go with very conservative religious values, and they were very upset with me. It was objectively funny.

[00:03:51] [LAUGH] But they didn't find it as funny as I did. I'll put it that way. So that's why I do this now. I'm getting less trouble for that. But anyway, let's keep going so let's install React Router dash DOM got yeah, you can get rid of us to bug value here.

[00:04:24] Okay, and I want you to go to your terminal, you can stop your server for just a second and I want you to say npm install. This one's not -D, because it's this one's actually a production dependency. So NPM I react-router-dom@6.2.1 If you're getting a dependency error and it won't let you install it you can actually just say --force.

[00:04:55] I don't imagine anyone should be seeing that right now. You'd be seeing that if you're on React Router eight, or sorry if you're on React 18. If you're trying to do this course on React 18 you'll see that error. React-router-dom has stripped pure dependencies on React and it says like, I only support this version to this version of React and 18 would fall outside of that.

[00:05:13] So it still works by the way, you totally can. It just won't work right now. Yeah, so you just do the same thing, but --force and that'll make it do it. Okay, I'm gonna run my server again. Once you have the two app.js. And then up here, we're going to import BrowserRouter, Routes and Route from react-router-dash-dot.

[00:05:52] So the first thing I'm going to point out here, why is it react-router? Well, there's also react-router-native as well. So they put out two different versions of this library. Once for react router, or sorry, react native ones for react. Because that work more or less the same way but that's why the dash dom is there.

[00:06:15] They used to make you install React router and react-router -dom kind of like there's like react-dom and react. And they eventually just did away with it. No, you just have to install one library. Okay, and then up here we're also going to import Details from ./Details, okay? So, Inside of Strict Mode here we're going to put BrowserRouter.

[00:06:49] And inside a BrowserRouter, we're gonna put like a nice little h1 here of adopt me. So we're just gonna move that I guess. And then inside of that, we're gonna put some routes And then we're gonna do a route here of path equals /details/:ID. And the elements that it's going to render is going to be Details, oops, Details.

[00:07:35] Okay, we're gonna have another route underneath that. Oops, I did that wrong. Like that rather. Okay and then underneath that we'll do another route this will just be the homepage so just be slash and we'll start do Search Params on that page. Okay and then we can get rid of this stuff down here.

[00:08:09] And I can get rid of that so you can actually see more of this. So let's talk about what we did here. What is browser router? It's basically saying that everything inside of here is being handled by some sort of router. So for example, I could have I don't know an h1 outside of here.

[00:08:33] And this will just like not be available inside of the browser. So I couldn't use any sort of like links inside of here. I couldn't use any of those browser router components. This is like a parent component that kind of governs all the internal state of the router.

[00:08:46] The other thing is you can have multiple routers. Now why would you want to have multiple routers. So, you can actually have like contextual side navs, right? So let's say I have like a page, a blog post, and maybe like little helper things on the side of my page.

[00:09:00] I can actually have a separate router that goes over to that part of the page and routes differently than what the core part of my page, right? So you can actually have a multiple different routers, that's I'd say that's pretty uncommon. And there's other ways of handling that which we might talk about later.

[00:09:16] But we're getting into kind of the advanced use cases of of routers at the moment. Yeah.
>> Can the path also be relative and what would it be relative to?
>> Okay, yeah. So let's talk about route components here. I'll get to it in a sec. So, the next thing you've seen in here is the routes component.

[00:09:44] If you remember the old versions of React Router, this is like the switch component that basically says one of these is going to be rendered at a time. So for example if I go to details/5 technically by regex match by path matching this path will actually match it because it'll match it everything to the left of it which is kind of relative here matches this.

[00:10:13] Suffice to say, both of these would match the path slash, so /detail/5. There used to be a problem with the old versions of React Router that you'd have two routes that would show up at the same time. So you'd have to have the switch component that was a okay only render the first one that matches.

[00:10:30] They kinda did away with all that stuff. So, if that all sounded complicated one it was and two don't worry about it [LAUGH] Unless you're on old versions of react router. They now have adopted how Reach Router works, which uses an internal scoring system of like what's the most specific path that matches this?

[00:10:47] So now /details/5 matches that and it matches it with a more specific score. You can think of it like a CSS selector basically, where it's more specific therefore it will use this one first, no matter what order they came in. Whereas before, with React Router 5, it mattered what order they came in.

[00:11:07] So they took a very complicated thing and they made it way simpler to use. So, in other words, this works, how you would expect it to. And I just want you to be grateful for that fact because I worked for a long time when it didn't work how you expect it to.

[00:11:25] So there's a question about let's talk about path for a second. There is a way to do relative paths and you can do that with like nested routers or nested routes. So if I go inside of details, and let's say I could put another routes inside of that it would be relative to the parent routes, right?

[00:11:46] So if I put a route inside of details, and I had the person had two more routes in there, one for about one for contact. If the person clicked on one of the links to take to go to the contact page in there, the URL would be/details/the number.

[00:12:07] This is a variable by the way, the colon means variable /contact, right? So it'd be relative to the parent routes. So that's as relativistic as it gets relative to the parent route there's not anything more than that. I think you're gonna have a base route as well, but it's gonna be the base of wherever this is being hosted.

[00:12:34] Okay, then so let's talk about this for a second. I want to have a variable here, right? So I want to be able to have like a details page. But I want to have a details page for all of my various different pets that I can adopt, right?

[00:12:47] So that's why I have this colon ID here. This will be the ID of the petthat's being clicked on, right? So for example, if I go back over to my page, Luna I know for example, her ID is one because she's number one but there you go there's my beautiful page.

[00:13:07] You can see here the ID here is one. So that's how you do variable here are like route params is with the colon. And anything after the colon is going to be the name of whatever it was so I could put like pet ID here and then it would be available as pet ID inside of those wrapped components.

[00:13:30] Okay, then let's talk a second about element. This is whatever you want to render if the if this route is matched, so in this case, I want to render the details page. Again, previous versions of React Router, this was actually you would actually just pass it the entire unrendered component you pass it like details like this.

[00:13:52] And then it would do the like, basically you'd pass it the class and then it would take care of the instance for you. Now they switched it so that you actually give it an instance of it. Why? I'm sure they had some good reason actually. I think I linked to the rationality, if you wanna go read.

[00:14:13] It made a lot of difference to a lot of people. And there was a large argument about it, and as well as things that are just like, whatever, it's functionally the same to me. I think I have, yeah, there you go, advantages of route elements. People just get really up in arms about APIs, especially when they don't Matter.

[00:14:33] I'm sure I'm offending someone by saying. That as you can see, that really bothers me. One of the great things about React Router is it's really accessible, they do a ton of work to make sure that, the focus tracks really well. And that if you navigate from page to page that they're focusing on the right things, and that they're firing off the right events so that screen readers can pick it up.

[00:15:01] So I think that's probably one of the biggest reasons I use React Router is accessibility, particularly around single page applications is extremely difficult. And if you don't know that means you probably haven't worked with it enough. So in other words, use React Router for that reason that like that's one of the best reasons to use it is taking care of all that kind of stuff.

[00:15:27] Cool and I think that's everything that I have to say about React Router so you have any questions about React Router.
>> Can you change that ID veriable to something else?
>> Yeah.
>> Does that have to come from the API or?
>> However you want, yeah, good question.

[00:15:49] I called ID because I'm not very creative. Other questions?
>> Yeah, I've kind of a follow up question to the question that was just asked. Can you contain multiple variables there? So like, could you I guess maybe that's it. I'm convoluting it but yeah.
>> Yep that works.

[00:16:14]
>> Cool, okay.
>> Yeah, the world is your oyster