Complete Introduction to React (feat. Redux and React Router) Index Routes

Transcript from the "Index Routes" Lesson

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

[00:00:03]
>> Brian Holt: Now we have to go over to client app.jsx and make that work. Any questions with this before I move on?
>> Brian Holt: Okay.
>> Brian Holt: Here we're gonna have to pull it in, so that's the first thing. Const Layout = require a /Layout.
>> Brian Holt: And, so here's kind of the tricky part of what we're gonna do here.

[00:00:49] It should do it correctly. Yeah, we'll pull it in the sec, okay? So, this is what's gonna be called a nested route, right?
>> Brian Holt: As you might expect, we're gonna have a route.
>> Brian Holt: Let's just do it this way. Path=, and it's gonna be the same as the slash above it, right?

[00:01:12] I'll kind of explain that here in a sec, and the component is going to be equal to layout, okay? And then, we're gonna indent these two ones, and this is going to be so you can have this one on the outside. So, these two having the same path doesn't make any sense, but the same time we want /always to go to running, right?

[00:01:40] We kind of have this weird problem where you have these two routes betting the same place that wanna use the same layout, so what we're gonna do about that is we're going to make this from what's called an index route. So, we have to pull in one more thing up here from React Router and that's index route.

[00:02:03]
>> Brian Holt: Okay, and now wanna change this router here, the nested one to be an index route and get rid of the path.
>> Brian Holt: So, let me, go ahead.
>> Speaker 2: Can we just wrap the router and landing component?
>> Brian Holt: The answer is that would probably work. Router expects to be the top level component of your app fish.

[00:02:33] [LAUGH] Because of that we're going to actually not make that the case when we started into Redox. But, for the most part, you don't want to wrap router in UI code, that's more what I'm getting at here. The other thing that's nice about this approach is you can have multiple nested routes, so say you have different layouts between different parts of your app, you can use this wrapped route and different parts of it.

[00:03:01] Okay, so to recap what's happening here, we have this path, right? So, this is the top level path, but if we for example had, maybe further down or [INAUDIBLE] have different layers of nesting,
>> Brian Holt: Like, the idea of this could be like home, right? And then, this would be /home/search, and this would be /home right here, right?

[00:03:26] That's the idea of these nested routes is you can share code amongst these next nested parts of your URL structuring, right? So, this is actually tied to URL structuring for good or for bad. I think it's usually a good thing, because that makes that your UI reflects your URL nesting.

[00:03:45] That is an opinion that they enforce upon you, but some might argue that's it’s an okay opinion to enforce. Basically, what this is going to do is it's going to render layout because it matches this one first. Okay, and then it's going to pass to layout whatever one matches interior to that one, right?

[00:04:06] So, if you go to slash the index route is, just whatever the path is of its parent, right, so you only have one index route per nesting. That's going to match the parent, so it's going to have lending being passed as a child or as children technically to layout.

[00:04:26] Now if you go to /search, right? It's gonna match this one right because that's up in the URL structure that it matches this first, and then it's gonna match this one's gonna pass search as the children. Do we follow? Does that make sense? Okay, again, a hard requirement of this, and one that I've never tried to get around, but as far as I know there is not a good way to get around it.

[00:04:53] They must share some sort of the URL structure, and this big particular case is not very hard because we're dealing with the slash, right, and everything matches slash that comes in your app. That everything is nested underneath slash, so go ahead and say that, and let's come back here looks like I don't have any essence problems.

[00:05:15] So, I should be able to come back over here to my app here, refresh, and go to Browse All, and those have my nice background the background now. My nice background in the background.
>> Brian Holt: I think that's pretty cool, right? And now, if you look again, if you look at search, you next book good job, Bryan search.

[00:05:38] We don't actually put that app container around it or anything like that. Now it just shows up because it's part of the nested layering than nested layering of like the routes that we've done. Any questions about what's happening here? Hopefully it's not too much of black magic to you.

[00:05:55] The router is a little bit of black magic, but hopefully it's not too much.
>> Speaker 3: We should take app container out of landing, right?
>> Brian Holt: Yeah we definitely should.
>> Brian Holt: Definitely should good point.
>> Brian Holt: If you would look, inspected that in the DOM you'd actually see that there's two App containers in there which is not necessarily what you want.

[00:06:21]
>> Brian Holt: So, yeah save that. I just took out line five and we've been line ten, I think,
>> Brian Holt: And built okay. So now, for refresh, go back to the home page, still works okay. Yeah.
>> Speaker 4: There's a question about using flow type for prop type checking. How does that work?

[00:06:45]
>> Brian Holt: Well, it works really well, I have very little experience of flow type, but the basic idea is that you start with flow type by letting flow type infer all of your types. You kind of build it up by saying like, okay, this is definitely going to be a boolean.

[00:07:05] This is definitely gonna be a string, and then once you kind of get that strong typing to your app. Basically, flow type is able to follow between different files that type signatures, and then it's able to say, hey, this was a boolean in the other file, and it's not a boolean over here.

[00:07:22] So, this is going to be a real problem and that's kind of the gist here. I'm not gonna give you much more of the gist, cuz otherwise I'd be making it up. [LAUGH] But that's how a FlowType is gonna do it. That's how TypeScript's gonna do it.
>> Brian Holt: Yeah, I don't wanna talk about types much more than that.

[00:07:41] [LAUGH] Good question though, other questions?
>> Brian Holt: Okay.
>> Speaker 4: I guess, is there any reason to use prop types if you're using flow?
>> Brian Holt: No, absolutely not. No, flow type definitely supersedes that. So from what I'm told, obviously I've never seen Facebook source code but they don't have prop types anywhere because they use flow type everywhere.

[00:08:10] And that kind of replaces the need for proptypes.
>> Speaker 4: And then, are we gonna review stripping out the proptype validation for production code?
>> Brian Holt: Nope.
>> Speaker 4: Okay.
>> Brian Holt: We are not. [LAUGH]
>> Speaker 4: And then, can you put the latest up on GitHub again?
>> Brian Holt: Yep, definitely
>> Brian Holt: Checkout -b, I think tonight I'm gonna home and read a one line piece of code to do this.

[00:08:43] Totally saw this idea from Hendrick who also did a friend in Masters one that guy's awesome like one of my favorite people. But, to hear the tool called YOLO, that out didn't just get commit push, right? Just right away and so I heard him say, that is the greatest idea for workshops in the history of mankind and so that's why I started doing the branches based on that idea from him.

[00:09:25] Definitely going to watch this course though. It's called Modern app development or something like that, and it's it's A++, really good. I don't know why I just gave an eBay rating, right. A++, would buy from again. Okay. Okay. That's the extent of what we're gonna talk about with React Router at least for today.

[00:09:52] Any of you have any questions about that before we move on to something else?
>> [INAUDIBLE]
>> Brian Holt: We are.
>> Speaker 5: So, I'm getting a console error. Index route does not make sense at the root of your route config and I can't see where my codes any different than yours.

[00:10:13]
>> Brian Holt: I've never seen that error before. My guess is that you have a sibling to this and it needs to be inside of it
>> Brian Holt: So you have a route, right? The first child inside of the route is the index route. So router, route, index route.
>> Speaker 5: Let's copy and paste your code and see if it fixes it.

[00:10:42]
>> Brian Holt: [LAUGH].