Complete Intro to React, v5 Reach Router

Transcript from the "Reach Router" Lesson

[00:00:00]
>> Brian Holt: So Reach Router, there's there's two major routers for React. And actually now there's probably three there's another one called NaVi that just came out that I don't really know too much about. I just know that it's up and coming and people like it. But historically there's been React router and Reach router, which are authored by similar people, Ryan Florence wrote.

[00:00:21] Reach router and he also helps with React router as well. So we're gonna use Reach router today. I'm a big fan of Reach router because it's very accessibility focused, right? So if you have like a page change it'll focus on the right page, and managing focus is a really difficult thing.

[00:00:39] And if you don't know that it's a difficult thing that means you need to work harder on accessibility probably, because it is difficult and it's also worthwhile, something you should be doing. So React router, it's not that it's bad at accessibility, it's not, but it just makes you handle a lot of accessibility things.

[00:00:53] Reach router handles much of that for you and they're smart about it, so it's a good project to look at.
>> Brian Holt: And that being said, they work relatively similar they're both great projects. If you're very interested in learning React router version three of this course, use this React router.

[00:01:15] It's still totally valid, they're still on the same major version. So yeah, go ahead and check out version three if you wanna learn about React router.
>> Brian Holt: So now, what we wanna do is, we wanna add a second page, a details page, right? So we're gonna have a single page application.

[00:01:30] Now, just a second to talk about single page applications, not every app needs to be a single page application. It's okay to have multiple different pages that load different things, right? So I'm just gonna show how to do this, so this is another tool in your toolbox. But don't feel like you always have to have a single page application, right?

[00:01:48] I think a good example of that is the Frontend Masters website, right? It's not a single page application and they did it really well.
>> Brian Holt: But something like Netflix is a single page application and that makes sense, right? It's a very app like feel.
>> Brian Holt: Okay, so what I want you to do is I want you to go back to your code editor here and I want you to create a new file and call this details.js.

[00:02:14]
>> Brian Holt: Okay, instead of details.js we're gonna say import React from react. You're probably sick of writing that now.
>> Brian Holt: And you'll say const Details equals arrows function, and for now we're just gonna return something dumb.
>> Brian Holt: Just something like that. And then we'll say export default Details.
>> Brian Holt: Well, obviously we're gonna fix this later, this is not what this is gonna end up looking like, but yeah.

[00:02:50]
>> Brian Holt: Now, at this point we need to go install Reach router. I'm just gonna let parcel do it for me, cuz I have parcel running right here in the command line.
>> Brian Holt: So at the top here in app.js, I'm gonna say import Router like that with curly braces around it from @reach/router, like that.

[00:03:17] And again remember, that parcel if I do this and you can watch it down here let's install that for me
>> Brian Holt: But if not you then you have to go do npm install reach router.
>> Brian Holt: Okay, looks like it's rebuilding. So now, I wanna do instead of just always rendering search press which is what we're doing right now, right?

[00:03:49] I want to switch between rendering either the search page or the details page, right? So what I'm gonna do here is I'm gonna put router.
>> Brian Holt: And then oops, I'm gonna put SearchParams inside of the router.
>> Brian Holt: And then underneath that I'm gonna put Details. Now, notice I haven't I haven't imported details as well but with Visual Studio code it says hey, you're trying to use the details component and you have a file called details.

[00:04:24] I'm pretty sure you're trying to use the same thing here. So I'll just click this, and you'll notice up here that are important details up here for me, which is convenient right? But again I have to do this line 5 there, import details from details like that.
>> Brian Holt: And then you have to give them paths, so I'm gonna say path= /details/:id like that.

[00:04:51] And I have to give SearchParams the path as well, I mean the path of /.
>> Brian Holt: So this is another way that React router differs from Reach router. React router will render everything that matches, whereas Reach router is only going to render the the thing that matches the most.

[00:05:10] Which is I realize a very subjective thing to say, because you can have two things that technically match the same thing. Like this, if I said, you don't have to follow with me here, I'm just gonna give you an example, some other route. And I said path = /details/1.

[00:05:29]
>> Brian Holt: Let's talk about ID here for just a second. This is a variable, right? This is a very common way of doing variables with paths, right? So if I put in, just ignore a 14 for a second. If I put in this, and I put in /details/15 into my URL, it's gonna pass that ID into that component, right?

[00:05:49] So it'll match this, right? Does that make sense? Okay, now, if I have these two routes here, which of these routes is more specific?
>> Brian Holt: Obviously some other route, like as a human, we look at that and that's very intuitive to us, right? But they've actually put like a scoring algorithm behind this that it'll choose the most specific route for you, and it's good, right?

[00:06:13] So if I put in /detail/1, React router would render both of these, right? And Reach router will just render some other route, which I think is the intuitive behavior that we would expect, right? But that's how that works. Make sense? Okay, cool.
>> Speaker 2: So does the order of declaration here matter?

[00:06:31]
>> Brian Holt: It does not.
>> Speaker 2: Okay.
>> Brian Holt: Yeah. Good question, it does not. So with React router they use a thing called Switch. If you wanna do just one particular route in that one, it will do the first one it matches, right? So in that one it does matter, but this one it does a scoring system and then it picks the highest score at the end

[00:06:53]
>> Brian Holt: Maybe I should probably be a little bit less bullish on that. It might matter at some point it might add like one point in their scoring algorithm, but in theory, I don't think it shouldn't matter. That was one of their claims to fame was scoring system in it.

[00:07:10]
>> Brian Holt: Okay, cool so now we have a router. Something else that's worth mentioning about Reach router is you can have multiple routers on the page. So you can probably imagine I have like a main page and I use a router for that. But I could also have a contextual site now, right?

[00:07:25] That like depending on which page amend the side nav changes as well. And you can also have a router over there that has different rules and different matching patterns. And those can work independently of each other as well. So it's quite flexible, it's a really powerful piece of technology.

[00:07:42] And we are just gonna scratch the surface, I don't think it's gonna do very much more than this, right? We're gonna use this and links and that's about it from Reach router. So just so you know, this is not a course on Reach router, I'm just choosing one to show you.

[00:07:56]
>> Brian Holt: Okay, so, now that I have that, let's go take a look at our page, again.
>> Brian Holt: So I have this, notice that on the slash, the home page, it's going to the params page, but if I go to /details/1. Look what it says, hi lol, right? So this is working the way that we expect.

[00:08:17] We can go backwards and forwards.