This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "React Router" Lesson
[00:00:00]
>> Brian Holt: Let's talk about Router. So something like Ember, something like Angular, these libraries/ frameworks ship with routers built into them, so you can build robust, single-page applications, right? Particularly, Ember is really oriented to getting you to build a single page application. Don´t get me wrong, you can build things with Ember without it, it´s just, it´s a part of the library.
[00:00:29] React has no opinion on the matter. In other words, React does not include a router with it. So if you wanna build a single page application, it´s up to you what tools you wanna use. For example, you can use something like Director, which is totally agnostic to frameworks underneath it.
[00:00:44] You can use any framework with Director. However, there is one in particular router that's built specifically with React in mind, and you may have guessed it's called React Router. It's a very clever naming scheme that we have here.
>> Brian Holt: React router is a really awesome piece of technology, particularly the latest version which is version four.
[00:01:09] Really well thought out and pretty easy to work with. It feels pretty intuitive to working with React in general. People's complaint about it, and actually the reason why I've come back here now three times is that the API thrashes is a lot, it has thrashed a lot. So, I mean it had pretty huge rewrites where people had to almost rewrite all of their routing code to deal with their huge rewrites.
[00:01:38] From v3 to v4 in particular was a really large rewrite. Understandably so, a lot of people are really frustrated that they build their apps on top of these libraries and then they just totally lose all support underneath them. So that's the word of caution I wanna give you is that this library has thrashed majorly twice.
[00:01:56] But then again, Real's thrashed majorly once as well, and we all survived, as far as I know, no one died. So, there are alternatives, there are other great libraries out there. There is one called, I believe it's React On Route, which is written by the same guy that wrote Express and Koa and half the other things that you use.
[00:02:20] And Stylus and Mocha and all those. And that one's pretty great. It's much more stripped down and bare. React router does a lot of really cool and interesting things for you. So that's one we're gonna use today cuz I would say that one has the greatest mind share.
[00:02:36] But I just wanted to let you know that there are alternatives out there that are also valid choices. Okay, so we're gonna use, the first thing we're gonna do is we're gonna split some of this code out into its own component. So I want you to create a new file called landing.jsx.
[00:03:00]
>> Brian Holt: And what I want you to make live in landing is pretty much all this code here in the middle, so I'm gonna cut that out. Go to landing and I'm gonna say import React from react const landing equals.
>> Brian Holt: This is one of my favorite parts about Prettier in general, I'm just gonna paste that grossness in there right?
[00:03:33] I would never let this live as is right, but guess what? Prettier is just gonna fix it for me. So I don't have to worry about formatting it correctly. And then down at the bottom then I'm just gonna say export default landing, right. And I'll just say that lo and behold, everything is fixed.
[00:03:50] I just love that. It just brings joy to my soul.
>> Brian Holt: How much time have you spent formatting things, right? Just let the computer do it.
>> Brian Holt: Makes programming by stack overflow so much easier. You laugh, its all of your jobs. Okay. So that's what landing looks like.
[00:04:21]
>> Brian Holt: Let's go back over to client app. What we're gonna do here, import React from React, we're gonna import render from react-dom, and then we're going to import HashRouter.
>> Brian Holt: And Route From 'react-router-dom'.
>> Brian Holt: Much like React, react-router works in multiple places. So there is a react-router-native, I believe.
[00:04:55] And there's potential for other ones, and there's also just kind of agnostic ones, like the memory router. So now we're gonna use HashRouter.
>> Brian Holt: And then I'll show you later how to work with BrowseRouter. Okay, and then underneath that we're gonna say import Landing from './Landing'. Okay,
>> Brian Holt: So the top level item inside of app is going to be HashRouter.
[00:05:34]
>> Brian Holt: And then inside of that we're going to have one route. Which is going to be exact path='/'. And the component={Landing}.
>> Brian Holt: So there's a bit going on here, so let's unpack what's going on. Let's start with the route I think that's kinda the easiest thing to reason about.
[00:06:06] This is one route of our application. It's saying that the path to get there is slash, right, so it's the home page, and the exact means it must exactly match that path. So if I did not have exact in there, and I had slash foo or whatever right?
[00:06:26] Slash would still match that right? Let me rephrase that, that's not what I wanted to say. What I meant to say was that if I went to slash foo In the browser, right? This would still match slash foo, right? Because it works with, I forgot the name of the path to something or other, I can't remember the name of what the path matching library is.
[00:06:57] But just like if this was /foo, and I want to /foo/bar, right? This would also match this. So if the left side of it matches the route, it's gonna match on it. So that's why you need to do it exact. That's what you're anticipating, you're saying it only match this, so it has to match exactly that or it doesn't match at all.
[00:07:20]
>> Brian Holt: Okay. So that's the route. Let's talk about hash router, cuz hash router is kind of a, introduces us to an interesting concept. The component is like, render this out if this path is matched here, right? So what it's gonna do is, inside of this div right here, it'll render out whatever is in Landing.
[00:07:45] Does that make sense?
>> Brian Holt: So basically, you're saying, hey route, if this path is matched, render Landing. If path is not matched, don't render anything, that's how router works.