React Router

[00:00:00]
>> We are on to React capabilities. I was struggling with section names, so I just made that up and having to come up with a better one. So capabilities, which is different than Core React Concepts. Naming is hard, [LAUGH]. Anyway, we're talking about React Router. React Router keeps me coming back here and teaching my class, so thank you to React Router.

[00:00:25]
They have a habit of drastically changing between versions. So if I have one warning about React Router, it's that there's a really good shot that version 7 is gonna require a big rewrite, and version 8, and version 9, cuz I've done it three or four times already. That's meant as in mild maybe suggestion to them to not have to change it dramatically every single time.

[00:00:53]
But again, it keeps me coming back and teaching this course, so by all means keep doing it. That's mostly in jest, it is true that they've changed a bunch. But the thing that I applaud them for doing versus other libraries, when they figure out something that's better, they just do it.

[00:01:10]
They change everything and they make everyone come along for the ride. Lots of other frameworks, notoriously someone like Ember, they just keep all the cruft around forever, which is better probably somewhere in the middle if we're being honest, but here we are. One thing that they have done really well is they provide detailed upgrade guides in where possible, they try and provide some backwards compatibility or shimming or things like that.

[00:01:37]
So give them lots of credit for that. So in previous versions of this class, I've taught previous versions of React Router. So if you need that, by all means go do that, this is React Router version 6. I have taught Reach Router before, which is written by Ryan Florence, which is half of the React Router team, so I have also taught that before.

[00:02:00]
React Router is made by the same people that make Remix, right? Remix is like a up and coming, very hot framework for server side rendering and generation of React. It's kind of a competitor to things like Gatsby and Next JS, it's very cool. There's a course from Kent C Dodds's on Frontend Masters about Remix, so if that's your jam, check out Kent's course.

[00:02:25]
But today, we're just talking about React Router, which is part of Remix. It's like the top part of Remix, there's lower level of Remix that we're not talking about. Okay, it's by far the most popular client side Router. There's a couple other ones that are more minimalistic, and honestly, less featureful than React Router.

[00:02:47]
But to be totally frank with you, React Router is so much more popular than everything else. It would be irresponsible for me to talk about anything else. So, why do we need a Router? This is going to be a single page application that has two routes, the search page and the details page, as you might imagine, there could be 30 pages.

[00:03:05]
We're just gonna do two today, but you could totally have a lot of pages. So let's go make a details page, I'm just gonna copy this directly cuz it's really short. New page, Details.JSX, paste, save. This is going to be our new page called Details, and we wanna make this App have two pages.

[00:03:30]
So we're gonna need an external library React Router dom specifically. So I'm gonna say, npm install, no capital D because this is a production dependency, react-router-dash-dom@6.4.1 Okay, I'm gonna run my server again. Great, so now I have React Router dom available, and I want you to go to your App.jsx file.

[00:04:14]
Up here at the top, I want you to import {BrowserRouter}, Routes and Route. So Routes plural and Route singular. Okay, delete SearchParams there, we're gonna wrap this whole thing in BrowserRouter. And whatever you wrap it in BrowserRouter is where BrowserRouter is going to be available for use. It's conceivable that you could have different Routers in different parts of the page.

[00:05:00]
Let's say you have a contextual side nav that navigated independently of your main page. It would make sense that you would have two different BrowserRouters kind of handling that. I've never done it, but it's in theory possible. Okay, inside of this, we're going to have, I got to get rid of the div here.

[00:05:24]
Interesting, okay, well, dump the div. We're gonna have this Routes component, and then we're gonna have two Routes inside of it. Route path="/details/:id", and element =, Details. And then you're gonna have a Route, and then I have to close that. Route path="/" and element = SearchParams, Like that.

[00:06:21]
What did I mess up here? I need that, okay. And then import details at the top. Import Details from "./Details". Okay, now we're good. So just to make sure that I'm not out of my mind here. Go back to your page, where's my Adopt Me? Now for refresher, if you remember we made this a link which looks like I messed that up.

[00:06:52]
Why did I mess it up? You know why? I bet you in Results, we didn't pass it in, did we? No, so here in Results, make sure you say, id=[pet.id). So my issue that I was seeing here is that I was noticing that the id was undefined in the Route.

[00:07:17]
So you have to pass that in the Results page, the pet id, then that's gonna be used here for the href to go to the Details page, right? So now, if I click on Luna, will take me to the Details page where it says hi, right? Then I can go back and it still works.

[00:07:40]
So a few things here, I'm just gonna give you some disclaimers about what's changed recently about React Router. First of all, if you remember we used to have a switch component, which would only render at most, one Route at a time. And it's when an order of which one was the most important one, blah, blah, blah, that's all gone, right?

[00:08:06]
And now has this scoring mechanism, it only renders one Route at a time. So it used to be that, if I went to the / page, because technically both of these would match the /, it would render both of those at the same time. That's weird, right? Well, you wouldn't expect that they fixed a bunch of that stuff.

[00:08:26]
And then the other thing that they used to do, which they don't do now, it used to have like, Details would be a child inside of the Route component. They don't do that anymore, you now use this element prop. If none of that means anything to you, then great, just learn this.

[00:08:43]
I'm just telling you what happened between React version 5 and version 6. The path here, so we have this :id, what is that there for? That means that this is a variable. So if I click here on Bunnahabhain, notice that there's two here, this is the id. So the id is the variable that you're coming out of your path.

[00:09:06]
So now I can access this id inside of my Details page. So that's what that is for. I think that's mostly it. We're using the BrowserRouter, there are a couple other kind of Routers. There is HashRouter, so HashRouter, I think we can probably just see really quick if that's helpful.

[00:09:28]
Well, yeah, HashRouter. Have you ever seen routing though, instead of having details like this, it'll have the # here. So it's like it's happening on the end of the # there. That's what HashRouter is for. In general if you can avoid it doing it that way, please do, you're gonna end up with way better SEO and a bunch of other stuff like that.

[00:09:56]
The only reason that you would ever want to do it that way is, let's say you're on Django, and your Django server is sort of very inflexible, what kind of routes that it can add? Where you can't go and add BrowserRoutes for every single variation of that and your server wouldn't be able to handle that, in which case HashRouter would save the day there.

[00:10:14]
Because then you can define one route, it's like, all right, here's my single page application, everything goes to this route, that's fine. If you can avoid that, please avoid it. We'll see static router later, that's for server side rendering of React apps and Node, so we'll do that later.

[00:10:36]
This link is working for our Details page, right? So if I click on Bunnahabhain, it takes me to the correct link. However, a better way of doing this instead of doing, let's go back to Pet.jsx. Instead of doing an a here, it's better if we do const or import link from react-router-dom, y.

[00:11:07]
Whenever I click this, it's actually gonna do a full refresh of the page. Not great, it'd be better if the server side, sorry, the BrowserRouter could just handle it. Whereas React Router could capture the event and then route without forcing the user to totally refresh the page. It's just gonna be slower, it's gonna take longer.

[00:11:25]
React has to read bootstrap that can be expensive on a low end device. So if I do Link instead of a, it'll still be a link tag, I can still give it a class name. Instead of giving it an href, you give it a 2 like that. And now it's not gonna be a full page refresh, it captures it all on the client side, works way better.

[00:11:52]
A plus, everything works. The other big shout out I'm gonna give to React Router why I think it's superior to other routers, it's very accessibility focused. They take great care in getting the accessibility right, which is something I deeply appreciate about it because routing and accessibility are hard when they go together.