React Router v6 beginner tutorial

routing is an essential part in any react application and react router version 6 is out and i'm going to teach you the basics in this tutorial and if you like my stuff please subscribe and click that notification button and i will be so super happy you know it and yeah probably nothing more to say here so let's get started all right we're going to start this tutorial with part one naturally so we're going to kick this off by installing react router version 6 and also set it up in our application so what i've done here is that i've created a little viet installation here with my react app so i only have this app.tsx where i just type out react router version 6 week so we're going to use this installation to modify everything to use react router version 6. and if we look here at this page react router.com they tell you everything about react router so what i'm going to do is i'm going to install this library the first thing i do so in my console i'm going to break this up no i'm not going to break the app but i'm going to break the dev server that's running that all right then we're going to mpm install and we can see here what we have to do we have this little command here npm install react router dom at 6. so i can just copy and paste this one in like this so we install the library and that's everything you have to install to get this up and running we don't need to do anything more so i type in ampere run dev to start up my dev server again just let's see that it works and it works so we're good to go so i go back to my code editor in my case it's visual studio code and the theme is um one more okay eighties i get a lot of questions about that so that's my team so in the main component where we have this initialization of the application i'm going to import some stuff here so i import browser router i like to rename it router so i can import it as a router you don't need to do it if you don't want that name otherwise you can use browser router as it is and then we need to wrap our application with this router so let's set it up like this and this will wrap the complete application and provide it with the router so that we can use all the routes and good stuff from react version 6 in our application so what we're also going to do here is we're going to scaffold out some stuff in our app component for us to work with when we try out all the good stuff from react router i've already created this little empty component here so i create a component that's called app and i type out this text here but i have to do something more here i need to import some stuff import we're going to need a route we're going to need a route and a link from react router dom all right then we're going to create a few components and as always i'm going to use some star wars references here because you know that i usually do that in my tutorials and i think it will work here too so that's what we're going to do we're going to create five components so we create five new files one that's called empire.tsx and one that's called jedi jedi.tsx we have one that's called loop.tsx and we have one that's called nothing.tsx we're actually going to create six components and we have a component that's called rebel.tsx and the last one is going to be yoda.tsx and i'm actually going to move them inside a folder that i call components so grab them here all the ones that we created and drag them inside of that component and then we can scaffold some stuff out yeah shouldn't move the main of course there it is yoda okay and if we look in the app we have this little scaffold out component so what i'm doing here i'm pasting it in i rename it to empire like this so essentially just creating an empty component i save the file and i do the same for jedi actually change the text here also jedi empire i should say empire luke change the text save it nothing should say nothing and this is going to be the fallback component when we can't match a route rebel like this on yoda right so that's actually it for our setup in this little tutorial in the next part we're going to talk about how to create some basic routes and also how to link to these routes okay we're going to create some basic routes in this part of the tutorial and we're going to be in the app component so we're going to continue on here and first we're going to import all of our components import jedi from dot forward slash component jedi we're gonna need the empire from dot forward slash component empire we're gonna need a rebel dot forward slash component rebel we import the dota from those four slash components yoda yeah not something import and we import luke from dot forward slash components loop and the last one is gonna be import nothing from dot forward slash components nothing remove dot tsx and that's the components that we're gonna use so i'm gonna change this one here a little bit first i'm i'm going to wrap it in parenthesis i'm going to use a react fragment here to wrap stuff in something like this and first i'm going to create the routes so what we can do here is we imported this component here from react router dom so instead of this div here i'm going to use this component route and inside of this route component we have a route so first it's a component for multiple routes and that's where you wrap all the routes that you have then we create separate routes and we use to route the singular route for that one so we use this component route and we're going to create our first route and we have a prop that's called path and in this case i wanted to go to the jedi component so i want the path that's called forward slash jedi and you don't need to use forward slash or anything like this you can just type in data just a regular string with jedi for the path and then we provide it with the element curly brackets and then we have our component jedi like this and we have to end this route also and fragment there also so that's our first route then we create the second route we're gonna have three routes for now so we have the path for this one it's gonna be empire and the element is going to be the empire and we have the last route the path is going to be rebel and the element is going to be the rebel element of course and we also have to close these components of course like this so that's our routes and we can try this out in our app now jedi empire and rebel so if i go back to my browser this is strange why is it complaining yeah i forgot to say this main main component here so yeah i usually forget to say my components and i get a lot of you saying that you should have order you should have auto save and stuff and yeah maybe i should consider that one so nothing wrong here the application works and we can try this out forward slash jedi and you can see that we have the data component forward slash rebel it works so we have our routes and that's great but we don't have any way to navigate to these routes so we're going to create that one also so inside app component just above the routes i created div and then if you look up here you can see that i imported the linked component and that's the one that you use when you want to create a link it's a link and it takes a two prop in this case we're going to go to the jedi no forward slash or anything here so this one will wrap what we want to link in this case it's going to be a p tag that says get out page so do it one more time the link two and it's gonna link to the empire page a p tag that says empire page and we can do one more so we have links to all the pages link it's going to go to the rebel page and we have a p tag that says rebel page save the component go back to the browser and you can see that we have the pages here so if i click on them here these are the pages this actually changes because the menu is going to be on all the pages just because we have the routes here below our menu it only changed the pages inside of the routes component so it seems to be working and that's pretty good actually so that's simple routes usually you don't need anything more than this if you have a very simple application but we're going to go through some more concepts and stuff before we finished with this tutorial so in the next video we're going to talk a little bit about nested routes okay we have our routes so we're going to create some nested routes in this video so let's start off by let's say that we want some nested routes inside of the jedi component so go inside the components and jedi and we have to do some stuff with this one here we're going to need some stuff from react router so import we're going to need a link we're going to need something that's called an outlet i'm going to talk about that later we're going to need a route component and a route from react router dom right and then we need some components so import yoda from dot forward slash yoda and we're also gonna need i think we're gonna use the luke from yoda dot forward slash not from yoda from luke of course and also the nothing i think yeah we're gonna use nothing here from dot forward slash nothing all right that's the component that we need and we can modify this component a little bit instead of this just saying jedi here we're gonna have a p tag that says this is the jedi page then we're going to create some links we have a link to it's going to go to the yoda page we have a p tag that says yoda and we have another link to luke p tag that says look and that's our links for now then we're going to nest on routes here and you can have as many as these routes you want inside of your application you can only have one that's called router here the browser router you can only have one router to wrap your application so we can create as many routes as we want so i'm going to use the routes the one with the s and then i create a route it's going to be yoda and this one is going to be nested but these routes are relative so this one is going to be jedi forward slash yoda but we just have to type out yoda because they are relative so they are relative to its parent route so to say so we have the element yoda like this so we end it then we have another route path is going to go to luke and we have the element look and we end it so that's it for our routes let's save this one and we'll go back to the application and we go to the jedi page you can see that this is the jedi page and we have the new links that we created here and you can see now that it complains here you run the descendant routes or called use routes blah blah blah yeah on the ralph path jedi yeah we did that but the route path has no trailing asterix so okay let's do that so go inside the app component and jedi if we have descendant routes we need to have a forward slash and an asterisk otherwise it will complain and the routes won't render so we can actually try that out i'm gonna remove it again and if we click those links here and it says that no routes matched location jedi forward slash yoda but if we add that little forward slash and asterix in and save it you can see that it render out page so that's great we need to have that one when we have nested routes like this in this component here so this is one way of doing it i'm going to show you another way to do this and that's when i'm going to use this component that's called outlet so first these routes here i'm going to grab them copy them go back to my app component and i'm going to wrap them inside of the route for the jedi here like this we don't need these asterisks now we can remove the forward slash and asterisks so i've nested these routes inside of here and it is pretty sweet i think because it gives you a very good overview of your application you can clearly see that we have a jedi and this data page has two child routes so that's pretty pretty neat i think i really like this way of creating the routes so save it we're not finished here go back to the jedi remove everything here that has to do with the routes we need to use the outlet this outlet component tells react where to render out the routes so if we don't have this outlet it won't know where to render out those nested routes that we created here so that's very important to actually use to use this component here otherwise it won't show up so i go back to the application let's try it out reload it just in case you can see that i'm at jedi luke and jenna yoda it works exactly the same but we have all the routes collected here in one place and that's pretty sweet i had this example just in the days now when i worked on the application for my client there were routes everywhere in the application it was very hard to follow so i moved them out inside of one component only and i had all the routes i can clearly see the structure of the application so that's pretty sweet and it works great i think all right so that's nested routes in the next video i'm going to talk a little about url params and also the hook that's called use params okay we've already talked about routes and nested routes but you also very often i would say need to send something along to the route with the route param for example here if we have the look page you have a forward slash and you may have some id or something and now it won't find anything because that route doesn't exist if we want to do that we need to use some params here in this url so that's what we're going to talk about now so i go back to the code editor inside the app component we have this route here for luke so i'm going to nest some other stuff here now so instead of self closing it i'm going to nest in another route here so i create a route the path is going to be and this one is relative to the loop because i nest it inside of that route so we don't need to have any forward slash or anything and we need to use an url param and you do that by a colon and then we can name our param i'll call it url data you can call it whatever you want it doesn't matter we have the element and it's going to be the same look component i'm going to modify that a little bit like this so this is how you specify that this one is going to be a url param you have a colon in front of it and that means that we can grab this url data param inside of the loop component and this is also pretty sweet yet again you can see that you get a really good structure here of your application where you can nest them in like this and have them in one place i really like this stuff all right so let's go to the loop component i'm going to import some stuff here i'm going to import use params from react router dom all right and we need to restructure some things here we can't do an implicit return so this one is going to have a return statement and it's going to be wrapped inside of curly brackets do some order formatting and it should work so we have this hook that's called use params and you use this hook to grab the parameters from the from the url so cost params i call the use params hook like this and we can change some stuff here instead of just saying look this is the look and then we can from the params we can grab our url param that we specified we called it url data page we can also console log out the params like this it won't work now because we haven't actually sent something along with the link to this page so if we go to the jedi component that's where we link to the loop for example we just link to luke but we want to send along something to the param so i have a for slash and in this case i'm going to send along skywalker so let's try this out we're on the rebel page let's go to the jedi page and i'm going to link to the look so we're at four slash jedi forward slash loop forward slash skywalker and you can see that it successfully grabs this url param here and type it out for us in the loop component so i can type out whatever i want here and you can see that it changed here it grabs it from the url params and here are the one that i also logged out we have the url data like this and you can see that it's in an object with the property of the url param so just to be very very clear here i'm going to go to my app we can change this to some other stuff here some other stuff so we name this param some other stuff i go to the loop it's very important that it has the same name here when i use it some other stuff like this i go back to my application reload it you can see that now it's named some other stuff and it works exactly the same so this is how you pass around values to different routes and it works pretty smooth i think so this is the hook use params and also how you how you create the url params in your application in the next video we're going to look at the use location hook the use navigate hook and and yes some imperative navigation also so we're going to talk a little about some hooks here now that is that's included inside of direct router library and we have a hook that's called use location and use navigate so i'm still going to be inside of the loop component for this one and i'm going to add in some imports here so we have use location use navigate and we also have a component that's called navigate that i'm going to talk about so let's use this stuff here inside of the component first we have our params let's leave everything as it is const location i call the use location hook i'm also going to console log out the location then we have our hook that's called use navigate to const navigate equal use navigate so what do we use this one for for example the navigate and the location well sometimes you need to redirect your users and you also want to know what page they were coming from so we can use the location and the use location hook to actually keep track on what page the user was on before you went to the new route and navigate and use navigate hook we can use to actually do the redirect so i'm going to create a new function here called handleclick and i'm going to call this navigate that's the one that i get here when i call to use navigate hook it takes in a to prop and it also has some options here the navigate options so you can specify if you don't want to to keep the previous history and stuff in but in our case we're going to have a plain navigation to the empire page when we click something and we need to have a bottom for this so we wrap this text here inside of a p tag then below we're going to have a button with an on click handler and we're going to call the handle click and let it say navigate to empire right let's go back to the application you can see that we have this button here so if we click this one we hopefully will go to the empire page yeah it didn't work at all as you can see here because i think that this is the url param and i wanted to show this because in this case you need to have a forward slash otherwise it will be relative here and it won't work so let's try this out again let's go back to the look page and navigate to empire and now it works you can see we have forward slash empire so if we leave out this forward slash here it will be relative but if we have the forward slash it will work as it should so this is the imperative way of navigating away to another route but we also have this component that's called navigate so down below here i'm gonna have a state that's called redirect to empire i haven't created this one yet so bear with me i'm going to do that in a second then i have the navigate component 2 just as before i navigate to the empire and if redirect to empire isn't true i'm going to return nothing so this component is only going to be rendered if this one is true so i have to create a state const redirect to empire set redirect to empire equal react.ustate we set it to false initially and i also need to import react for this one input react from react all right so we have that state so when we click this we're going to call this handle click but this one isn't working now because it's saying that it should navigate away so i'm going to create another one for this one and i'll comment this one out cost handle click and this handle click is gonna set redirect to empire to true so first this one here redirect empire is going to be false and that means that we don't render this component here it will only render when we click this button so just as before we need to click the button to navigate away and this is a declarative way another one was the imperative way i like this one a lot actually so we go to the jedi page to the loot page and navigate to empire and you can see that it works just as before and here you can see that it also console out the location that we get from the use location hook so we get some properties here we have the hash we have a key that's created we have the full path name we have the search if we have had any search parameters in this one and we have something that's called state and what is that yeah we can send along a state from the previous route so in this navigate component here we have a prop that's called state and let's say that we want to keep track on where the user came from so from route you can have what you want here in the state so i'm creating an object with a property that's called from route and i'm going to send along the complete location object so this is the one here that i grabbed from the used location i pass that along to the route by the by the state prop so let's save this one and go back i reload it just in case jedi page luke page and navigate to empire so if we look here at the location we actually don't have a state yeah and that's because of course i have to console this state out in the empire component not in the loop component because we're navigating to the empire component so up here i'm yet again going to import use location from react router dom all right so this one is going to go inside of parenthesis and return i have curly brackets and const location equal use location like this and then i can console log out the location for that route all right let's save it and go back to the application let's do it all over again jedi page look and then we navigate to the empire page and now we can look at this location here and here you can see that we have the state so we have the from route that i created and we have the path name we know that we clicked from this path here so that's great we can keep track for example if we have a login page or something where the user should log in we can route them back to that page that they were on earlier all right that pretty much covers the use location and the use navigate and the navigate component in the next video i'm going to talk about fallback routes so let's talk a little about index routes and fallbacks routes for this one if we check out the application you can see that for example when i go to the jedi page we we're not actually showing something here we don't have a route let's say that we have a route that we want to be shown when we go to the data page we're showing of course this one's that's actually on the data page if we look at it here we are rendering out the links here so that works pretty much as we expected to but let's say that we want to show for example the yoda page also when we go to only the route that's called jedi here because now we have to click on yoda and we have jedi forward slash yoda but we may want to show some default route here when we go to the jedi page so we can do that by specifying here i'm specifying it in this app component now so you can see that we have the route jedi so let's grab this yoda route paste it in above remove the path and specify it as an index page save it go back to the application you can see that it says yoda so when we're at jedi it also renders out the dota as the the default route for this one we still have the yoda page of course jedi forward slash yoda and luke but the data page will always render out the yoda page also because we specify this as the index route here so that's pretty sweet if you want to have some some default stuff show before you selected something else okay so that's a default route but how do we specify if we have a route that doesn't exist for example if we type in jedi forward slash something like this no routes match the location okay yeah that's pretty natural because we don't have that route so what do we do if the user specifier route that doesn't exist you can see here up here somewhere i'm going to import yeah i'm already importing the nothing component okay so that's great so let's stay in the jedi component i'm going to be in the nested route for the jedi so i create a new route with a path and this path is going to be just an asterisk that tells the test react router that every other route that it can't find use this component instead so we specified element to nothing we close this route and we can try it out okay so you can see that it's already rendering out nothing so now we can essentially type in whatever we want here and it will always render the nothing component if if the route doesn't exist so that's pretty good to know otherwise the application will break and it will say that this as you saw here it can't find the route so it can't always have a fallback route if you navigate somewhere that it shouldn't navigate to so that's fallback routes for the jedi page i'm gonna try it one more time here just because it's so cool and it's showing nothing so that's the fallback route and you also have the default route here that shows yoda and that's pretty good to know how you handle this stuff in react router so that's everything there is for this video in the next video i'm going to talk about how to create some search params i have one more thing that i want to talk about in this tutorial and that is search params search params or something that you can see very often in the routes for example you have a question mark and you have a param and you have some value and then you have an ampersand and you have a another and you have some value so these are search params it's not the same as your url params because url params are part of the url these ones are just added to the url after the question mark so we're going to talk about these search params and it's very good if you have a form for example where you fill something in i'm going to send it away to an endpoint to an api or some something else right so let's do this i'm going to be inside of the i think i'm going to use the rebel component for this one so first i'm going to import a hook that's called use search params from react router dom all right then i'm going to do the same stuff that i did before this one is getting wrapped in parenthesis and return statement we make an explicit return instead that's what we're doing here because we need to do some stuff up here so this use search params hooks works almost the same as the state in react we get the search params and we also get a setter for the search params so const search params set search params equal use search params right and i'm going to create a couple of search params for this one but first we need a button also so return we're going to return we're going to remove rebel and have a p tag this is the rebel page and down below we're going to have a button with an all click handler that's going to call a function that's called handle click set search params right okay so const handle click we're going to call the set search params that we have up here and we're going to set some search params and this one takes in a regular object where you can set whatever search params you want so we create an object i want to set the ship to be an x-wing and we can also set the base location the rebel base location to be hoth right let's save this and see if it works we go to the rebel page get set search params and you can see this they instantly gets added to this url up here so it seems to be working but how do we retrieve them how do we use them in our application well we have them in these search params and i'm just going to console.log them out so we can see them console.log search params and this is very important we can't just grab them with a dot and what they call because this is a url params object so we have dot get very important to use get and then we have parenthesis and we have a string with the name of the param that we want to get and we had one that we called ship and then we have the base location console log search params get base location save it and go back to our application you can see that it actually console logs the mouth for us so that's how you grab them inside of your application you call the use search params hook and you grab them like this in your components so that's pretty much it with the search params and it also concludes this tutorial in react router version 6. i think it's great and i've used the react router a lot but there's there's also starting to emerge other libraries out there and i think especially the react location is a very very interesting library by tan aliensly that also created a react query library for example so that's something i'm going to look more into and see how it works you can for example pre-grab your data before you render out the route and stuff in that library very easily so who knows maybe i create a video on that also but for now this is the tutorial on react router version 6 and thank you for watching these videos and if you want to support me please click the subscribe button and hit that notification button also and i will be very grateful so see you in another one

Channel: Weibenfalk

Views: 747

Keywords: development, coding, react router v6, react router, useLocation, react js, react, usenavigate, url params

Id: kQQl85UrJVs

Length: 37min 49sec (2269 seconds)

Published: Mon Nov 29 2021