Nested Routes Tutorial - React Router Dom V6

hey guys how's it going i'm back here with another video and today i decided to bring this video which was requested by a lot of you guys after i released my react router version 6 um video a couple weeks ago um and basically what you guys requested is for me to make a video where i go over how to work with nested routes um in the new react router version so a lot of updates were made to react router um i really liked the updates but this specifically was one of the major ones because it makes creating nested routes a lot easier and a lot cleaner in my opinion now in order to explain exactly what nested routes are and how to implement them in your project i created this little demo over here which is just a simple website if you want to check out the code for it it's going to be in the description together with the code that we write for this tutorial but basically imagine you have a website where you you have a navbar right and you have multiple routes for example the home page the login page and then some sort of page where inside of it there's multiple different um things you want to display for example in the products page we have the products route but then inside of the products route we have other routes such as the search route where you see the page displays this little search bar then there's the list page which basically just display like lists of products maybe you can add a add product page if you want to also if you want to click on one of the products you can go to a specific page which only displays the information of that specific product those are various different examples of situations where you need to use nested routes because um in order to make this work you will have to implement it in a in a very concise way in a very organized way and recruiter dom provides you with that so this is basically what we're going to be building i'm just going to be focusing on the react router aspect of it i'm gonna be building the css and the whole like html for this this is already done but i'm gonna use this as an example in order to explain it to you guys so with that in mind if you guys could leave a like for this video it would help push my videos to more people and just help support the channel overall so again with that in mind let's get into the tutorial [Music] [Applause] [Music] [Applause] so now that i show you guys a demo um let's get into the tutorial um i have set up this little project over here which again the code will be in the description however it is a very simple project i know there's a lot of a lot of lines of code but basically it's just creating the routes for the the project right we have the navbar over here with the three links that we have in our internet board then we have all of our routes and um all the their definitions in this project we also have a folder um for components um the home and the login component and also all the different components that we have for the like the products right the list products the product display like page and everything um all the logic for them so everything inside of it it doesn't really matter i'm actually using fake data that i wrote over here um for for the products again you can just use them if you want to that really doesn't matter for the point of the tutorial what matters is the fact that if we go over here to our routes definition you can see that if we wanted to like define the routes like we had over here where you go to products then you go to product slash search then product slash um list like all of those things you can see it's already looking weird it's already looking different from what it was before because we i removed the implementation of nested routes in this project so if we wanted to do something like this we would have to define a different um route for each of the different specific routes that we want so like um for the product slice search would have to create a separate route for this then one for this then one for this and also um the the navigation menu that we have in the products page like the slash products page this one over here it doesn't exist on the other ones it only exists on this one which is kind of weird because we won't just have it in every single one of the pages um so how exactly would we fix this and how exactly would we implement nested routes in this situation well the way we do this is very very simple we have this route uh like the main route for for the nested routes like system for in in this case called the products route and in the products while instead of self closing like this what we want to do is we want to actually enclose and wrap all of this around with this route component then all this routes inside of here are now childs of the products route and this means that we don't need to put products anymore over here you can just put the name of the route and it will automatically know which route you're talking about then um we have we now have all of this and you can see it still works perfectly if i go to the list or to the um let me see the search one um it seems to work right it shows them the little navigation system that we have on the products but it doesn't show anything specific to that page right if you go to the search one it doesn't show the search bar the list one doesn't show the list and the add one doesn't show the ad um add product um thing right the reason for that is because if you want to display a specific thing for each of the routes so a specific component for each of the routes you need to go to the main component which is the products one um over here and what you do is you add some sort of common functionality or common ui for all the pages and in this case it is the little navigation here at the top or routes right we have the login the home and the products route and in the products route we have a specific ui that we want to display for all of the different products routes so in the search one we still want to see this thing over here for the list one we also want to see this and even if we go to specific one like a specific product we also want to see all of this over here the only thing that is changing in the page is whatever is below that right this thing over here and this is exactly what the outlet component is the outlet component will replace wherever you put it in the in your code so we put it right below the navbar just so that the network continues in the page but the outlet but whatever is below it changes um and it will be replaced with whichever component we defined over here so in the list of products the outlet component will be replaced with this if we are in the um list routes so we just keep replacing with that component with the other components that we defined based on the routes of the products so if that's a bit confusing don't worry um i would literally just play around with it but as you can see um now everything works perfectly you can even nest more and more um routes inside of other routes for example i have this id route over here which basically just displays the like one individual route um that when we click on it right so if i actually made this into another route i could add more routes inside of here um and using the outlet would be the same thing right i would i would just put the outlet and change whatever i want now i don't want to do this this was just an example but it's just to point out all the different cool stuff that you can do with this now this is something that isn't that complicated um but a lot of people have difficulties with it in the beginning i certainly did especially with the changes with react proto-dom version six um however as i mentioned i would play around with it and if you need more help and understand better react rather dom i do have a really really nice video where i go over everything you need to know that is actually important i i skip all the unnecessary stuff um only the things you will always use um and with regular dom and explain everything so if you want to check out i'm going to tag it over here at the top and also put a link to it in the description so this is a pretty short video however i really wanted to make this video just because a lot of you guys requested and if you enjoyed it please leave a like down below and comment what you want to see next and subscribe if you want to support the channel with that in mind i really appreciate you guys watching this video and i see you guys next time [Music] [Applause] [Music] [Applause]

Channel: PedroTech

Views: 102,220

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, nested routes, react router, react router dom, nested routes tutorial, react router v6 tutorial, react router v6 nested routes, react js tutorial

Id: PWi9V9d_Jsc

Length: 8min 37sec (517 seconds)

Published: Thu Dec 30 2021