Summary of Lecture on Nested Routing in React Router

In the previous lecture, we looked at how to create links using the link component for React Router. We made this kind of menu with about and products, a link to Browse and products. This is cool. It goes to the about page, it goes to the product page, but we always have to click the back button and that's very annoying. So what can we do better? Of course we can. How about we keep this menu at all times? So when you click about, you're still going to see the menu about the products up there and we click products, the same thing is going to happen. You're still going to see the menu. How can we do that? So to be able to do that, we're going to use nested routes. So let's do it like so. So this is the app component, right? App component stays the main page and contains this menu. So what we have to do here is here, after this message, this is the main page, we are going to inject the page, the new route, the content right there. So we're going to have nested routes. We're going to have the app and then inside the app component, we want to be able to have the about or the products component injected right here. To be able to do that, we have to use nested routes. So let's go back to the text editor. So this is the main component, right? So here, this is the main page, here is the content for the selected router page, whatever. So I put this text here. So we want to be able to write here to either render about or you want to render products. Okay? Depending on what the route is. So this is our goal. So to do that, let's go back to the src slash index.js file. This is where we have our routes, right? So you can see they have routes. The slash route is separate from the about route and products route. So what we have to do is nest these two routes inside the slash route. Okay? So that's the first step. So let's get rid of the closing slash there and actually allow route, this route slash route to receive children. Okay? So we do it like so. And then we're going to take all these two routes about and products route and we're going to move it inside the slash route like so. So now it's nested, right? So we have these two routes nested inside another route. Okay? Now when you do this kind of nesting, React router is going to allow you to choose which one you want to display. So when you have this kind of thing, these routes, whichever one is chosen, depending on what path you have, will be injected into the component, in this case, app component as children. Okay? Children, that's important. Okay? Now once you hit the slash about, for example, it's going to go through, it's going to render app and then we're going to make something inside app, we're going to write something so that it also renders the about page at a specific location. This case at the end, after that message, here's the content. Okay? So let's get back to the app.js and make it happen. So here we are. This is where we want the specific content, specific component to be rendered. It could be products, it could be about. Now what we're going to do is we're going to write like this, open braces, this dot props dot children. Okay? We're going to take the children that's passed to this component app and that's going to work out because the way React router works there and the routes are laid out, we have nested routes. So it's as though you take the app component and then you go down all these routes and you look for the path that matches your path. And then the path that matches you take the component, pass it to app as children and it's going to appear right here. Okay? Let's test it out. So let's go. Here we are in the slash, right? So let's go to about. See what happened? About is now showing up here. Now let's go to products. Click products. Show us up down here. Okay? So this is nested routing and this system allows you to have a main content right here that changes all the time and you have a fixed manner up in the top. You can add a footer and many other things. So basically this is the most basic thing you're going to have. So it's a must for any application and website that uses React router with React router. Okay? Let's preview what we did in this lecture. So we wanted to be able to render the about, the content from the about page or the content from the product page right here on the main page except down there. So we wanted to keep this menu at all times no matter what page we're in. So what we did was we nested the about and product routes inside the slash route that has under the app component. So we nest these guys and then we have to get access to these components from the app component itself. And the way we do that is through the props.children. So the children prop is injected here. Since we are placing these two routes as children of this route slash route we have access to them to the chosen one. So React router goes through the nested routes and goes through each one starting from the top and if it matches the path say our path is slash products and it starts here it looks slash about okay this is not a route so I'm going to skip it and go to the next one. And then go slash products is this a route yes it is so we match so we take the component injected to the app as props.children and it finally appears here in the app component. Okay very important to use this guy this props.children don't forget otherwise it will not work. Alright so that's it nested routes now we got a nice manual up in the top and we can change pages. Thank you so much for watching hope you liked this video and subscribe if you are not already my subscriber and until the next time bye.