Complete Intro to React v4

Complete Intro to React v4 Component Routing with Reach Router


This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React v4 course:
The "Component Routing with Reach Router" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Wrap the Results and Details modules in Reach Router and add routing paths to each of the components.

Get Unlimited Access Now

Transcript from the "Component Routing with Reach Router" Lesson

>> Brian Holt: So now we're gonna go back to App.js.
>> Brian Holt: And we're going to import | Router | from "@reach/router"; and due to the magics of Parcel, this will just magically appear for us.
>> Brian Holt: Okay, and now what we're gonna do is we're going to surround Results with the Router.

>> Brian Holt: Like so.
>> Brian Holt: Okay, we're also gonna pull in Details. So this is another one of my favorite features about,
>> Brian Holt: VS code in particular. Notice that I haven't actually imported Details up here. But I just started writing import Details. And if I just hit Enter, it's not only going to autocomplete this.

[00:01:10] But if you look above, it'll actually add import Details as well. So if I hit Enter, notice it just came from Details as well.
>> Brian Holt: That's pretty compelling, in my opinion.
>> Brian Holt: Okay, the last thing we need to do is we need to give them a path, as in, what URL do I need to be at to actually hit this particular route, right?

>> Brian Holt: So the way I'm gonna do that is path="/".
>> Brian Holt: So this means that the base route is going to be the Results page.
>> Brian Holt: Then, for details, I'm going to do path="/details/". Then I want it to have what's called a variable parameter on the end here.
>> Brian Holt: I'm gonna put :id.

[00:02:17] So that means anything that's /detail/ some long string of some sort, right, is going to be passed to Details with that id as a parameter.
>> Brian Holt: So that's what that :id does.
>> Brian Holt: Another key difference between React Router v4 and Reach Router is Reach Router uses what's called a scoring system to decide which route to use.

[00:02:56] So technically, / and /details, slash technically meets both of these requirements, because this is considered a child of slash, right? If you were doing React Router, you would have to do something like exact so that it would have to match exactly this. But with Reach Router, because it uses a scoring system, it judges this one to be of higher salience and renders only that one.

[00:03:27] Which is really convenient, believe me. Having written in React Router for a while, this is really quite nice. You don't have to do anything like switch. Switch only allows you to render one thing at a time. There's a lot of conveniences to Reach Router. So now if I go over to my browser, like it should be, it's still on this page.

[00:03:45] But if I go to /details/1, notice that I go to my other route.