React Router | Learn routing in React with React-Router 6

[Music] routing is essential when you build a single page application and you have to handle the routes somehow because when you have a single page application you don't have routes in that sense because you're on the same page and your application needs to handle the routes when you're using react you probably used to reach router or react router and reach router is going to be deprecated or maybe it even it's deprecated but I don't think so and then going to merge them together into one router library and that's react router version six and if we look at the current version it is on five point one point two you can actually use the version six today so in this video I'm going to show you how to use react router version six and it's also going to be a good video in general about routing the fundamentals are the same reactor router six uses a little bit simpler syntax and you can easily translate it over to reactor out of five if you want to do that so the first thing I'm going to do is to bootstrap an application with create react app so we starting from scratch in this one so I go inside of my terminal and into a folder where I want to create my application then I use MPX create - react - app and I'm going to cool this one verb and - test - router and we wait for it that's or bootstrapped application and if we look at the documentation I'm in the documentation and advanced guides they have a migration guide on going from version 5 to version 6 so they have some new useful information here and it's down below here they show how you can install react router version 6 so you have react - router at 6 you can also use at next to get the latest version so that's the one I'm going to use so I clear the console and of course we have to navigate inside of the application that we just traded wave and test router like that and then I MPM install react - router at next and react - router dome at next and then we can open up our code editor and we can also start up the application NPM start seems to be working and that's great open up the console we can see if happens there okay back to the code editor I'm going to bump this up for you guys something like that maybe and I'm going to delete some files here as usual I could use my video on creating a create react app template instead I have a video on that in my channel so look through my videos and you'll find out one it's very very convenient you can create your own theme for create react app and use that instead and don't have to remove or add all the stuff that you usually do when you create an application with create drag tap alright setup step setup test service work your logo index dot CSS app to test CSS and app dot CSS I'm going to remove all of these ones and that's because I'm not going to have any styling in this one I want to focus on the roading itself so that's why I remove this once and I have to change some stuff in index I remove this serviceworker we don't have this CSS file here so remove these ones save the file and also in the app we can remove everything here inside of the app div and for now we can just type out app we remove the CSS and the logo and save the file and we can go back to the browser and see that it works reload it that's strange actually it should update itself okay break it and NPM start really strange yeah here you have it guess it was some temporary bug there all right so we have the application running so back inside of the code we're going to create some new files and for this one I'm not going to have a nice structure or anything so I'm going to create so few a few components inside of the SRC folder so new file and we have a file that we call home doctor so that's going to be our home component he port react from react inside of that component Const home equals an arrow function for now we just have a div that says home export default home auto format it and that's a component save it and also mark all the code and copy it because we're going to need it in the other components that we're going to create now we're going to create three more pages the home is our first page so we create a page that we call page to dot s and another one page three no TAS and page for the KS oh this one shouldn't be named like this rename shouldn't have a space there page two three and four so inside the page to paste the code change home the page to like that do the same inside of page three change it to page three and the same inside of page for page four and save the file so these are the components that we need for our application now we're going to start inside of the app component to set up a router so up here first we're going to import from the reactor out atom library that's the only library that we're going to import something from we don't actually import something from the reactor outer library it's just there to get everything up and running and get it to work so reactor outer dome that's the one that we're using because we're creating this application for the Dom so that's why we use that library we have the browser router and this is the same as in the previous version we have the routes this one is new routes is a component that you can use instead of the switch component as you use in reactor five we can go back to the documentation check this out you can see here you have this switch component and that is before the 5.1 that you use this one you don't do that anymore we have the routes instead of the switch so that's one of the changes in this one and then we have the route itself and we import them from react - router - don't all right so that's the components we're going to need from that library then we have to import the components themself so import home from dot /home and we also import page two from - /h - import page three from - /h three we're not going to import page four here because we're not going to use that one here we are going to use that as a nested component instead and I'm going to show you that further on in this video okay so that's our components and now we can use them inside our app component here so remove this app first we have our browser router you have to wrap everything inside of the browser router and you're probably going to do this very high up in your here a key of components in this case I'm doing it in app component because I'm going to have some main routes so that's why so that's probably the most common use case when you set up your router do it high up in the hierarchy if you don't want to have nested routes and stuff like that so we set up the router here we wrap our complete application with the browser router component you could also of course create it down below here or you can also set it up in the index component depending on how you want the structure of your application okay so that's the browser order itself then we have the routes component and that's the one that I talked about that is instead of the switch component that we used before and in this rote component we're going to set up the routes for the different pages that you want to route to so first we have a route and we specify the path and if we specify it as a forward slash that means that's the route page the start page of our application and this is different in version 6 we have a prop that's called element and inside of here we can have our page element in this case it's going to be home so as you can see this is much easier if you work with previous versions or react browser it's very easy if you want to send in some prop to this one you can just specify them here as usual you don't have to do any render prop and soft stuff like that to get your props to your components so this is a much better syntax and easier to set up - this is all you have to do to specify this route and of course we also have to self close this one here so this will show the home component when we have this route here do some order formatting save it go back to our application and as you can see we're at the root now so that's why it shows the home component but if we change something here you can see that we not showing anything we don't have a route for that one but if we create an asterisk here and save it go back to our application you can see that it shows the home because then it's going to use this route from what you specify here and all the descendants to that path but we're not going to do that for obviously for the route because that's no good it's going to show that route for every route below that one so that's not good actually I'm also going to bump up the font here something like that maybe okay so that's the route for the home page then we create another route with the paths and these routes are relative so we specify page two and we have the element equals and we have the page two component capital P like that self closed this route and the last route we have a path of page three I'm going to set up a param in react router you can do that by specifying a colon and we can call it whatever you want I call it cool param because I think this is cool so live with it and we have the element and the page three component and self close it there's a lot of money so this one here : and the name of your parameter and we can grab that information from the URL this is all the routes that we're going to need save it go back to our application yeah we have the home component and if we specify forward slash page to page two you can see that it shows the page two component and page three yeah we don't have something there because we have to specify this one here also all right because we have setup that in a row that we need to have this information here also and we're actually going to have a forward slash and an asterisk because we are going to show the page four component that we create here as a nested route to page three okay so that's the setup of our routes that's the main stuff you have to do before you can use any routing inside of your application let's go inside of our home component and set up some routing to these pages by using the link component in the router library so first inside of home dot yes we import link from react router dome and this is the component to use when you navigate to different pages okay so for now we just have a div here create parenthesis instead and we can have a Mundt set up an h2 tag with a header homepage then we use a link component linked to and this one is going to link to page two you just specify it like a string here where we want to link this one and inside a link you can type in whatever you want I have a P tag go to page two and we also want to set up a link for a page three link to equals h3 and for this one I specify this URL parameter so that's why we can set it up like this I have a forward slash and I want to send in some some information now that we can grab in our application so vibin is awesome like that then I have a P tag go to page three remove this one here it shouldn't be a PITA it should end the fragment do some order formatting and this should be it for this component so save it go back to the application you can go to her home page and as you can see we have two links here this one is going to page two and the other one is going to page three so that's great it's working let's go inside of the page to component and import link import link from react router dome and here just as before we create parenthesis remove that one create a fragment we close the fragment and inside the fragment we create an h2 tag h2 hair we create the new link to equals forward slash this one is going to link to the home page go to home and do some more of learning yeah we can have a P tag also here just to be consistent like that or affimir it save it go back to our application go to page two and you can see that we have the link that we can go back to the home page so that's great this is how you set up a basing routing system in your application and hopefully you can see that it's not really that difficult but routing can feel a little bit difficult I have to admit that but this is all you have to do if you want to set up a basic routing system for your application so now I'm going to move forward with a little bit more advanced topics first in the page three component we are going to grab that param that we sent from our home component we have the text here vibin is awesome and it's now stored in this harem that is called cool param here so that's the one that we're going to grab in the page three component so go inside page three gaius import routes we are going to create a nested route also in this component so that's why I important now route link and we're going to use a hook that called use params and use navigate from reactor outer dome do some order for marrying maybe no it wants to have them on one row that's sad but alright then we import page four from dot forward slash page for like that and here we're not going to do an implicit return so we have curly braces instead because we are going to use these hooks here so that's why we can't do that so we have a return statement parentheses and we can create a fragment we end the fragment and inside of our fragment just as before we have an h2 tag h3 we have a pea Tagg this is the URL we are going to grab our URL that we send into this one but let's specify all of the dsx first we have a link that is going to go to /p tag go to home just as before right remove this one all of merit so this is everything we need from now and up here we have these hooks now in react router that's also fairly new the hooks API so we're going to use that one so we create a Const and from this one I'm going to destructure out the cool param we destructor out it from use params really really nice API to get the params and this is the one that we specified in the app component we want this program to be called cool param and in the home component where we go to page three we have this one here so that's the one that we're grabbing go back to the page three component so here in the P tag this is the URL parameter we can use the cool param that we just structured like that save the file go back to our application and we can go to page three and you can see this is the Europe you are L prom wavin is awesome and you can see that this is the one that's up here and this is great when you want some data for example in my beginner react course I use this one where I have an ID of a movie so this ID is obviously going to change for each movie so I can grab that one and with that idea I grab data from the API so that's how you send along a parameter you can use for a page so in my case I grab different content depending on the ID of the movie so really really handy if you want to send along to the route so that's the basic stuff for sending along params we have this nice hooks API now and it makes it a breeze so that's great as the last thing in this video I'm going to create the nested route so I'm also going to navigate to this route programmatically with a button instead of using the link component and I'm going to send along some state also to that one to show you how you can send along data that you don't want to have in the URL because you maybe you want some data but you don't want to have it up in the URL as the cool prong so that's what I'm going to do so down below the link here fraid of button unclick equals I'm going to create a function that's called handle click so handle click camera taste go to a nested page for all right that's our button and then you can set up nested routes just as we did before with a routes component you wrap them in the routes component and then we set up the route just as before path equals page four and element is going to be the page four components and we self close this one some order formatting don't know why it's changed this fragment all the time that's very annoying you should have the end fragment here of course then we create the handle click function Const handle click equals I'm using arrow functions as usual and I'm going to use something that's called navigate and that one we can grab that from constant a vagator I'm putting it in a constant a call navigate and I call the use navigate hook so this is the one that we use in reactor out of the six before that you have something that's called history but this one instead they are changing this one to be called used navi instead and that's the one I think that you also use inReach router so they're going for that API there instead yeah I actually think it's a better name on the of this hook we run the use navigate hook and we put what we get back in the navigate Const and from that Const that's a function that we get back we can navigate programmatically and that's great so first we navigate to the page for this is a string and then as I told you I want to send along some data to this route that won't necessarily be seen in the URL and how can we do that well we can have an object here and we have something that's called state inside of this object and for this one I want to send along a message so I create another object with a message probe and I have a string this is Raven saying hi all right do some order formatting and this should be so we have this state property on the routes and I'll send along a message you can have as many drops inside of this object as you want in this case I have this spring so save the file let's go back to our application you can see that I have a button here go to nested page four and it shows the page four component here down below the bottom very small yeah something like that now if you probably see it page four it's down below the button here we have nest to this component with page three as a parent I'll go back inside of the code and in the page four component we have to do some stuff also so we import the link and use location use location is another hook that we can use to get the location data from the router from reactor outer dome and just as before we can't do an implicit return because we're going to use the hook so we have curly braces we have a return statement with parentheses fragment and inside a fragment we have h2 tag I want to be consistent here page four and we have a P tag and I'm going to show the message and we can grab the message from the location object so use location is the hook that we can use here constipation equals we call the used location hook so I put the data I get back in the location Const like that we can console.log it out and down below here again inside of our P tag from location dot stayed I have my message like that location right and then we can have a link back to the start page link to /fp tag and go to home all of who married and also have to remove this one here it was it adds that one alright I call the use location hook to get the location data inside of this Const a consular get out we're going to look at that in a second then I have my message here that's the one that I send along from page three you can see here on the state I have the message so that's the one that page four is going to get on its location object and this one is only going to be seen on page four cause we're sending it specifically into that route all right and then I have a link to the home page here again as we had before so save this one go back to our application reload page four you can see that I'm showing my message here this is wavin saying hi so that's great it's working and we can look at the location object here we have a hash that's nothing inside of that we have a specific key for this route we have the path name so we can see where we are and we have the state object here and you can see my message so this is great when you want to send along data to that route that you don't want to have up in the URL to be visible to everyone up here just going to show you one small little thing more if we go back to the app component I use this Asterix here so I'm going to remove this one for the page three route just to show you what it does you can see it won't show us the page four component now this isn't working if we're not using the asterisk there because we're telling it here to show the page three component on all the descendant routes and if we don't do that it won't show us that because we have we look here we have the page four here also added to the route so it won't show it if you don't use the asterisks all right that was a lot I think this video became a little longer than I thought but hopefully you learned something about routing this is all the stuff that you need to know about routing in a single page application if you don't do some really really advanced stuff please make sure to subscribe to my channel I'm going to put out videos like this weekly in this channel see you in another one

Channel: Weibenfalk

Views: 4,427

Rating: 4.9370079 out of 5

Keywords: development, coding, react router, react router tutorial, react tutorial, react js, react router dom, web development, react router 6, react, reactjs, react router v6, react-router, react-router 6, react-router v6

Id: J4faOAn6NGA

Length: 28min 24sec (1704 seconds)

Published: Tue Apr 28 2020