React Router V6 Tutorial - Routes, Redirecting, UseNavigate, UseParams...

hey guys how's it going i'm back here with another video and today i decided to bring this tutorial which a lot of you guys have been requesting me um since there was an update in react router dom um basically i'll just go over what are the changes and how you can use required dom in version 6. i do have a video um in my channel where i go over a lot about react writer dom however that video is kind of outdated at least like i would say 50 to 60 of it due to the update um but not all of it is has changed so if you're also interested in seeing more about react product dom i would recommend watching that video as well um but today we're going to go over a lot of topics you will be seeing them being distributed in the timeline of the video and um feel free to ask any questions if you want down below and the code will also be down below if you want to check it out so with that in mind if you guys could leave a like and subscribe i would massively appreciate it because it will help push my videos to more people and just help me will help contribute to the channel so with that in mind let's get into the tutorial [Music] [Applause] [Music] okay everyone so as you can see i have um i have created here a very very simple react application i just ran um create react app and generated the files um then i just deleted uh some of the initial files that came with the correct react app command and this is all that i have now i just have the app.js the app.css the index.js and the report vitals.js i deleted everything inside of the app.js as well i'm just left a little text saying hello world as you can see over here well the first thing we need to do is install react router. so i'm going to open up my terminal and at least i have two right now running one is running the code as you can see it's running react the second one will be used to install stuff and i'm using yarn but if you're using npm same thing just write npm install instead of yarn add which is what i'm gonna be writing and for me i'm going to write yarn add then you write the command react router dom at 6 which will basically determine that you're installing the version 6. then i'll press enter and it will start installing again if you want to use npm just write npm install and the command over here so another react dom has finished installing let me just push this a little bit over here so so you guys can see it better we can start implementing everything related to um the library so for those who don't know um recruiter dom serves to create different routes in your application so if you have a website you might want to have a component render when you go to slash home and a different component when you go to slash about right many websites have different routes and in react there's a very clear way to implement this by using the react router dom api so the the basic structure of of implementing react order dom in version 6 is still very similar to how it was before the way you do it is on your app.js you come over here to the top and you'll say import from react router dom um let me just put react router dome then you're gonna import a good amount of stuff first thing is you gotta import a browser router um but we usually change this uh to to call it router because it is easier to to write um basically this will is a component you use to encompass all of the different components in your application that will exist inside of this router system so all you need to know is that what we will do is on the highest level of our application which will be in the app.js before anything will just return the router component like this and for now i'll delete the div over here because um the app.js won't really have anything major inside of it other than the routes determining where the user will go um based on the path right so what we want to do is just put the router component like this and close it after then we want to import something called routes and routes is different it didn't exist before usually before we would use a component called switch but now we're using something called routes which is just a component that you should put over here which again will determine where in your router system you want to have routes now what's the difference between the routes component and the router component well technically i can have inside of here a link for example an a tag like this which says something like go to home page and the the href for this might be um some sort of path in our website so i can have inside of here a link saying go to home page and technically i'll click on here and it will bring me to the home page um you can't really use react router dom components if it is outside of this router component so technically if you want to create a nav like a nav bar that exists in every single page no matter the route we can do something like this because what we're doing here is we're just saying that um when you go to your application based on the route you want to render the components that we choose so this whatever is above this will remain the same throughout every page you guys will see this a lot better like a lot um simpler as we go but for now just know that every route you define should be encompassed over um this routes component then inside of here is where we actually start declaring our routes so a route is declared by using the route component so inside of here let's for now create the the home page and the home page will be defined as follow the path for it will be just an empty slash and for those who are familiar with the la with regular dom we'll know that this is um actually a very common practice this basically just means that um this is we're gonna render the component and when the user goes into the um link that doesn't have a route so like when someone puts the url like google.com and doesn't put anything after the slash just google.com um they basically are rendering whatever is defined for the routes slash the empty slash this is just the main page of our website just think about it that way and for now what we want to do is we want to have three pages in this project just as an example for you guys so i want to create a folder called pages or you can call it whatever you want but i like to call it pages and inside of here i want to create a component called home then a component called about so like an about page and a component called profile so three different components that we're going to be using in our application so we'll have three different pages in our application for each one of them i'll create a component by using my snippets so auto generate as you can see over here and i want to differentiate them by writing some sort of text here so in the home component we'll say this is the home component or the home page then we'll do the exact same thing for the about page um as you can see over here we'll say rfce and we'll just say this is the about page like this the about page then we'll do the exact same thing for the profile and for the profile page i'll just paste it again and say this is the profile page so now we have three different components that exist in our application but there's no way to to actually search for them so i can't just put over here profile and it will show us um the the component saying this is the profile page the way we do this is we'll come to our app.js and for the empty slash we want to show the home page because when you go to the website you want to see the homepage so how do we determine um what components is rendered when you try to reach this path well in version 6 you just say element you give it a property called element and you put the component inside of here so i'll put the home component inside of here it used to be different it used to have a property called the component over here which doesn't have any more you could also use a property called render before but this all changed the way you determine which component you're trying to render for this route is by using the element property over here so what we need to do now is create more routes to our application specifically we want two more the first one will be that will be the about page so i'll put slash about because when i go to the website slash about i want to render the about page and similarly we'll say the about component will be rendered if we try to reach for this then over here i'll say profile and we'll do the exact same thing and you should see that just like that it is working perfectly i'm in the slash profile and it says profile page if i go to the slash about it should say this is the about page and if i go to this empty slash it will say this is the home page if i go to something that doesn't exist like i didn't create a route called this it should then show anything as you can see over here well what if i want to show um some sort of error right saying like oh this is an error page because um there's no route defined as you search for you can do that very easily what you can do is you can create a component or a new component called error page for example and i'm just going to keep it very simple all i'm going to say is [Music] error page not found and i'm going to save this and in our routes definition we'll add a route right at the bottom and this has to be the less route you add in in your routes component um i'm going to basically give the path of just an asterix why am i using an asterisk basically it says that whatever exists like whatever route you're trying to search that isn't one of this over here will render the component called um error page so we'll know it is an error page or uh yeah it's error page right that's how i called it yeah error page we'll know it is that because you try to search for something that doesn't exist so error page and let's import this component over here at the top import error page from slash error page and you should see that if i try to search for something that doesn't exist it'll say this again if i search for something else it will still say this but if i search for the profile page it will give us the profile page meaning it's working perfectly now what i was mentioning in the beginning that you you can add links um to for example to this over here um what i meant by that is for example imagine if you want to create a navbar right and i'm going to create a very simple navbar over here i'm not going to style it at all all i'm going to do is i'm going to use the math component in normal html and i'm going to put some links inside of here well how do you put links well i can use the a tag that exists in normal html but you can also use a tag that comes with react creator dom or a component that comes with required dom called link and the link component is very easy to use all you do is um we can come over here call the link component and give it a name for the link so like in our navbar let's have the home page then we can also have the about page link and the profile page link so i'll put about and profile now you should see that they should appear um they're actually not appearing because we we still need to to add something more to the link component but basically they should be appearing over there so what we want to do is we want to add a path that will be directed when you click on this link the path we want is the at least for the home page we'll give it the empty slash so you pass the property to and give it the path and for the about we'll say two slash about then for the profile we'll say two slash profile and then this should be it and you should see that the error is not here anymore and we have three links at the top if i click on the um the home page or the home link it will bring us to the home page if i click on the about one it will bring us to the about and if we click on the profile it will bring us to the profile so this is how you navigate towards different pages in react writer dom but there is a thing you should be realizing although we are in the profile page and there's no links in the profile page as you can see that basically just says this is profile page it's still showing the navbar well it is because technically all we're displaying in our application is um whatever is over here will be shown in every single page the only thing that is changing is whatever is below this right so if we want to have for example a common structure for a website where there's a navbar in every page and there's a footer in every page and what changes is whatever is in the middle of that well we can do that by adding a nav above the routes putting the routes and below the routes we can add something like a footer like footer and whatever you add for a footer and you should see that everything changes but the things that are outside the routes component so this is kind of hot like this is kind of how it works um it's not actually generating um changing everything completely the only thing that is changing is whatever is between this now there's a lot more that we can talk about um in react rider dom and one thing i really want to talk about is the idea of navigating i do have a video talking about how to redirect and react rather dom where we talk about the history api that used to exist um in in react or dom but if you see over here if i say use history it doesn't exist anymore which was something extremely important and now simply doesn't exist we actually use something different now imagine we are in the um profile page and in the profile page it actually also has a little button over here which when i click on it i want to be navigated towards the um about page right we're in the profile we'll click we'll have this button saying um change to about page why do we need this well technically you don't you don't not only navigate with links right imagine you're you're submitting a form or clicking a login button and you want to be redirected to another page it might happen on like on events on functions instead of just on a link so the way you do this is the following we'll have this button in our profile page and when i click on it i want to be navigated towards the about page the way we do this is very simple what we do is we import from reactor dom so i'll say import from react router dom and i'll import a hook called use navigate so this is a replacement for the use history hook which used to exist and it is simpler in my opinion especially because they use history hook used to cause so much problem you have no idea how many comments i used to receive um complaining that it was a bug happened or something like that and i actually never knew how to resolve because um it happened to some and not to others um but hopefully they use navigate has changed that because all i have to do is i just have to create a variable called navigate it's pretty similar to what how i used to do with the use history but i'm going to set it equal to use navigate and now i can use this this over here represents a function that when called will navigate towards some sort of route so when i when i want to click on this button i'll say on click i want to navigate towards a path called slash above so the the syntax is you just call the function and put the path where you want to navigate and you should see that when i come over here i'm in the profile page as you can see if i click on this all of a sudden i'm in the about page if i go to the profile and i click again it continues working perfectly and it didn't give me any bugs which again used to happen when we use the use history hook well the last thing i really want to talk about is um using params and react proto dom because um i mentioned that in the other video and um although it didn't change much i just want to point it out on this one so you don't really need to go to the other video to see how to do that well what i mean by params is imagine that um when you go to a website and you want to see a profile page for example you might see that it it like it changes based on the route so like if i am in the about page and it's about slash page row it should show um a name over here like my profile page it's actually not the about it should be the slash profile so it should show the profile page for the person called pedro and if it is on the slash jessica it should show the about the profile page for the user jessica so how exactly would we know which user we're trying to search for so that it would show different information in the profile page well the way we do this is by using params so for example i'm in the profile page over here and i'm going to change the link for the profile page a little bit because now i'm accepting like an extension to it you will say slash profile slash the name of a person or or the name of the user so what i'll do is i'll just say slash username and this is how we represent it if i want to put a username over here we'll on the url i'll just write um two dots like this a colon and then the name of what we want in our like to differentiate so in this case it's a username you could have put id and differentiated by d but i'm going to put username then on my profile page i can come over here and import the use params hook that comes with reactprotodom and then all i have to do is is to create a variable that is going to represent the username and set it equal to use params now what do i call the the variable i need to call it exactly what i called over here so i said that whatever is um after the profile in the url it's going to be called username so i'm going to come over here to my profile page and grab the username from the url and now if i want to for example say this instead of saying this is the profile page i can say this is and then put um the username this is the profile page for whoever is this username and i'm going to put an exclamation point over here and you should see that um it says now this is the profile page for jessica if i go to pedro or pedro tech it should say this is the profile page for patreon tech it differs based on what is up here now is this useful yes extremely useful you can use this to create different profile pages as we're doing right now i would usually recommend using ids like putting an id for a user over here and then when you make an api request you grab that and make that api request using that id so with that in mind that's basically it for the tutorial i really just wanted to go over all the changes mainly changes related to the routes component the switch component anything related to the use navigate hook which changed a lot um and i really hope you guys enjoyed this because i felt that youtube was kind of lacking videos on the updated version of required dom so if you really like this video leave a like down below and comment what you want to see next subscribe because i'm posting once or twice a week depending on the week and i'm going to continue posting out content for you guys and and yeah check out the code below if you enjoyed it leave a like and i see you guys next time [Music] [Applause] [Music]

Channel: PedroTech

Views: 8,657

Rating: 4.9557195 out of 5

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, 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, react router, react router dom, react router 6, react router v6, react router dom 6, react router tutorial, routes in react, how to redirect in react, multiple pages in react

Id: UjHT_NKR_gU

Length: 20min 42sec (1242 seconds)

Published: Tue Nov 23 2021