Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "React Router" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

The React Router module is used to manage different URLs in the application. The <Router> component defines which component should be instantiated when the application encounters various paths. To demonstrate this, Brian configures the App component to display a Landing component when the default ‘/‘ route is encountered.

Get Unlimited Access Now

Transcript from the "React Router" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: So let's talk about react router. So now we have one page on our app, right? This is a pretty boring app. Cuz you can't really do anything, Browse All doesn't do anything. Nothing really works. So we want to be able to have multiple pages in our app.

[00:00:19] So, what we're gonna do is we're gonna bring in the react router. And this is a basically, single page application SPA router and it's pretty cool, it works really well. Ryan Florence and Michael Jackson are the two guys that wrote it. Ryan actually has done a react Frontend Masters before.

[00:00:42] Super smart guys, they came from the Ember community. And Ember, if you've ever used Ember the one thing, the shining star in my opinion of Ember is its router, it has a really, really great router. And it's very easy to use, and it's also required to use. Whether or not you're doing a multiple page app you must use a router.

[00:00:57] At least that was the case when I was using it, as mentioned that's still the case. So they basically took all the great ideas of the Ember router and they brought that into react via the react router. And it's pretty robust, react router does some pretty cool stuff especially the recent version.

[00:01:12] And we're gonna be using the brand new version. And they specifically asked me to use this version. Hence why we're using it. But if you're gonna be building your own react router governed app I definitely suggest you deep dive into it because you can get some pretty cool features out of it.

[00:01:31] So right now we're gonna just be using the top level router.
>> Brian Holt: So first of all let's, yeah that it's a good idea. Let's move from clientapp.jsx, this is actually not our app, this is our landing page. So what we're gonna do right now is we're actually we gonna move this out into its own page.

[00:01:49] So go ahead and copy all that stuff and create a new file called landing.jsx
>> Brian Holt: And just paste all that in there. So again I just took, basically, the top half of this and pasted that into landing.jsx. We don't need react dom, right? We're not using that in this page.

[00:02:11] So we can get rid of that. And then down here at the bottom we need to do a module.exports =, we have it called app right here but we're gonna call it Landing instead. And then module.exports = Landing.
>> Brian Holt: So this is now our landing page.
>> Speaker 2: Do you need to require react?

[00:02:40] It doesn't let you reuse the-
>> Brian Holt: That's actually a great question.
>> Speaker 2: Same request.
>> Brian Holt: Yes, you must because you have to think about what this is being transpiled into. Remember, this is actually going to be transpiled into React.createElement, right? So while you actually don't see react being used here, this does get transpiled to use react.

[00:03:02] So yes you must include react.
>> Brian Holt: And luckily our landing, because we brought it in standard react is smart enough to know that this is going to eventually use React as well.
>> Speaker 2: I was gonna say my editor yells at me as well but standard doesn't, so I was like-

[00:03:20]
>> Brian Holt: Okay. Are you using standard format as your plugin?
>> Speaker 2: I don't think so.
>> Brian Holt: If you switch to the eslint one. It shouldn't yell at you anymore.
>> Brian Holt: Okay. So let's go back to here and now we're gonna refactor this little bit in ClientApp.jsx. So now we're gonna pull in landing so const Landing = require('./Landing').

[00:03:55] We're gonna pull in react router.
>> Brian Holt: Okay, and now we're going to pull a bunch of stuff out of react router that we want to use. So we're going to say const Router = ReactRouter.Router. const Route = ReactRoute.Route. And const hashHistory = ReactRouter.hashHistory. Now I don't know about you, this seems like it's a little burdensome to pull all these out piece by piece.

[00:04:47] There actually is a shortcut to do this, thanks to the magical powers of VS6. So we can actually do, and you don't have to do this by the way, this is just I find it easy. Router, Route, hashHistory } = ReactRouter.
>> Speaker 3: [COUGH]
>> Brian Holt: Bless you. So this right here is equivalent to this.

[00:05:20]
>> Brian Holt: And the way that works is I know inside of the react router object. I know it has a router. I know it has a route and I know it has a hash history property so pull those out and call them the same thing. You can also if you wanna call it something different, you can do hashHistory: hh, if you are into two letter abbreviations.

[00:05:40] So now it would pull out hashHistory and call it hh. And you can mix and match too, that's totally fine.
>> Brian Holt: So I'm gonna do that from now on because lines eight through ten is kind of burdensome and I don't want to do that. And we can actually go so far as this.

[00:06:02] Just on the require line do it.
>> Brian Holt: So any questions about that, does that make sense what's going on there? If that doesn't make sense it's going to not make sense for a long time until we do it a bunch of times, so ask me now.
>> Speaker 2: So can you access react router as a whole then still, since you're never defining it as a constant?

[00:06:29]
>> Brian Holt: Nope. Yep, if you want to do that you have to pull it out.
>> Speaker 2: Okay.
>> Brian Holt: If you were using ES6 modules there'd be an easy way to do it. But I don't think there is with common JS. This is called destructuring by the way in case you're wondering.

[00:06:46] That's what this is called. And if any of this ES6 stuff confuses you I would highly highly suggest going to 2ality.com and just reading everything from Dr. Rauschmayer. He is super smart, really, just top of the line and he explains everything really in depth. And he's on TC 39 which is the body that standardizes JavaScript.

[00:07:15] So, everything he has is awesome. Yeah. So, any question about destructuring? Okay. So let's get rid of that. [SOUND] And now we're going to rewrite our little app, right? Cuz all this stuff is contained in Landings, so we're just gonna delete all of that. And now we're gonna do router history, sorry, history={hashHistory}.

[00:07:56]
>> Brian Holt: And here we're gonna do Route path='/' component={Landing}. Will sit down for a bit. I'm standing too long today.
>> Brian Holt: So let's kind of piece this apart. So you have a router and insideof a router there are several routes, right? In our particular case we only have one route at this moment which is going to be our landing.

[00:08:31] But as we add more and more routes to our app they're going to go in here inside of the router. Okay. Then there's history. There's several ways that your router can keep track of you going forwards and backwards, right, so that the forward button and the back button don't work or so that they continue to work.

[00:08:50] One of them is hash history which is the easiest to use, which is basically, have you seen pound slash, right, and it keeps track of your, in fact, we'll look at it here in just a second. But basically it's going to use the anchor of your URL to allow you to keep track of going backwards and forwards.

[00:09:08] We'll eventually use browser history once we get to the node side of things but right now we're going to stick with hash history. Okay so that's the router. Now we have route inside of here which is like one individual route. And first we saw the path, right? So slash is the home page right.

[00:09:27] But if you want to have the search page this is gonna be /search, right? So that's kind of telling it where you want that to go. And then the component is whenever you're on this route use this as your display, right? So, in this particular case if they go to the home page, show them the landing page, right?

[00:09:48] Any questions about react router? What's going on here?
>> Brian Holt: Okay, so, let's save that
>> Brian Holt: You can go check to see if anything's yelling at you. I'm not running webpack anymore, so let's do that,
>> Brian Holt: Okay? You'll notice that our hidden modules are going up and our file size is going up.

[00:10:19] That's the virtue of that we added react router to our project now.
>> Brian Holt: So now we can refresh and notice that we have this weird stuff up here. So what's going on up here? Well the first part, that's our route, right? Because right now we're on pound slash which is coming from here, the path, right?

[00:10:44] And then we have this barf up here, right? This terrible looking stuff, and that's how react router is keeping track of its internal state. It's kind of throwing that up into the URL. So if you share this URL with someone else they'll come down to the exact same state that you're on as well.

[00:11:00] That's what that is. It's kind of ugly but it's a necessary evil of using hash history. So once you start using browser history that goes away. Just FYI. Okay. Does anyone have any questions about react router or what we've done so far? We haven't really done anything crazy right?

[00:11:20] Because we're not routing anywhere else. We just basically have a one page router which is totally worthless. [LAUGH]