React Router v6 Major Changes

[Music] hey what's going on guys so react router version 6 has been released and there's quite a few breaking changes so you'll have to go ahead and update all of your react apps that use react router are kind of a pain in the ass for me because i have youtube videos and courses that use version 5 and now they're pretty much outdated so i do have my react front to back 2022 course that's going to be released this week this coming week and it has three new projects i'm also going to add a fourth and it's all up to date react router 6. so what i want to do in this video is take my crash course that i did earlier this year and update that and i'll do a couple extra things just to show you some of the other changes even though they don't really pertain to this project so i'm going to go ahead and clone this to my machine okay and then we'll cd into react dash crash and then from here i'm gonna update the router i believe it's 5.2 right now so i'm going to say react dash router dash dom at latest which i'm pretty sure is 6.2 right now all right so let's go ahead and open up vs code in this directory and you can see if we go to package.json yeah the latest version right now is 602. so with this project if you if you didn't take the crash course basically we have a back end using json server that we can run with npm run server and then we can run our front end with npm start so i'm going to open up my terminal here and let's do npm run server that'll run the json server and then in another terminal i'll run npm start and that should go ahead and open up and the error we're going to see here is a route is only ever to be used as the child of routes of the routes element so the first big change is the the switch element doesn't exist anymore it's been it's been switched to routes so let's go into my source uh app.js and i wasn't using a switch here and another big difference is you didn't have to wrap your routes in switch before but now you actually have to wrap your routes in that routes element so we want to bring routes in and then i only have two routes for this one is just a simple route to the about page and then one i use render to use a couple different components all right so first thing as the error says these have to be wrapped in routes so let's create our first routes element our tag and then we want to go what are we doing down here we want to close that routes okay now as you can see uh we're not we're not seeing the for the home path right here we're not seeing these components and that's because now we don't use component all right and we can't even do the the render props like like i have here instead we have an element prop that we use so first thing we'll do is change this to element and instead of just setting it to about this is going to take in some jsx and we need to then put the about tags like that and then for this one instead of render we're going to go ahead and say element and then another thing that is a really nice change is we don't have to do exact anymore so we can get rid of that and then element we're going to set that to some jsx so i'm going to grab this what i have in my render and we'll cut that we can get rid of the render and let's go ahead and paste that in and now we'll save and now it works okay so i guess the the biggest changes is the switch that's now changed to routes and you have to use routes and then instead of component you want to use element which is going to be anything any jsx that you want that that route to render okay and i believe you can only have these routes inside of the routes elements so if we put like an h3 here ym it's not working so if i put in h3 and save that we should get an error and it just says that all component children of routes must be a route or a react fragment so we can't put these like h3s or divs or anything like that alright so i'm gonna just create another component here called details or task details and in here let's just i'm actually going to paste in some code and i'll go over this in a second but i'm going to save it and just add a new route so first we want to bring that component in so that's going to be task details and task details and then i'm going to create a route with a parameter so here let's just we'll just copy that down and this is going to go to my task details component and the route is going to be slash task and then slash colon id so the way that we deal with params is is really no different than version 5. we just do a colon and then whatever we want to call that param i'm going to create a link to hit this route and that's going to be in the task.js so first off i'm going to bring in link which is another thing that hasn't changed the way that we deal with links so we just bring in link and then we do just link and we still do a two for this it's going to be dynamic so we need to add curly braces and then i'm going to add back text and we just want to go to task did i do task or tasks task and then slash and then we want the id which i can get with task dot id all right and we'll just say i don't know view details for the link okay so now if i click on that and we look at the task details component i'm bringing in use state use effect and then use param so the way that we get params meaning this id up here in the url with react router version 6 is the same as version 5. we can bring in params we set a variable called params or we can we can also destructure the params and then we can use that like i did here i just made a request to fetch the task from the backend or json server with params.id now before what you could do is pass in a prop here and you would get you know match you could do that and then you could say match.params you can you can't do that anymore with um with react router version six those props have aren't available anymore so yeah so you want to do this use params now i just want to kind of show you some other things that have changed one is the redirect uh the redirect component so before you could bring in you know redirect actually i'll just go ahead and try this so if i bring in redirect and then let's say down here we'll check for let's say if our response dot status is equal to 404 and then we'll go ahead and set error let's do set error to um i don't know we'll say task not found and then down here i'll add an if statement and i'll say if error then i want to redirect so what you would do with version 5 is you would say redirect to and set that to whatever you want to redirect oops and you would you know you would do that but if i save this i'm sorry i need to return this if i save this we're going to say redirect is not exported from react router so we can't use that anymore it's been replaced with navigate all right so now we have navigate and we can go down here and just replace that with navigate okay so now if i go to you know slash task slash and then i don't know just something that we know isn't going to exist then i get redirected to um to the home page now there's also a use navigate hook which is really what i would use in this situation so let's bring in use navigate and then instead of setting an error and all that and then returning navigate instead what we can do is first of all initialize right here let's say const navigate and set that to use navigate and then we can simply say navigate and then wherever we want to go so just slash and now if i go to slash task slash and then a bunch of junk it just redirects me now let's say we have on our details page we want a go back button so we actually have a custom button component so i'm going to bring that and we'll say import button and then we'll go under this paragraph here and just say button and it has a text prop so we'll just say go back and then that should just show us a button okay and then we'll add an on click and we'll just put in a function here and i could just navigate of course i could say you know navigate to slash and specify that but we can also put in here negative one and before what we would do is there was a go back we could bring in from reactor or dom like we could bring it in like that and then call it but now we can just use navigate and pass in negative one and now if i click go back it takes me to the the last page and you can do like negative two and then let's do we'll say go to the about page and then we'll go uh we'll go back here i'll click on view details and then click go back and you see it takes me to the about page so you can go back as many pages as you want or maybe there's some kind of limit i don't know but yeah you can do that and then if you want location data like you want the path name then you can bring in the use location hook and we can initialize that here use location and set this to location or we could just destructure because i just want to use the path name so we can get that from use location and then let's say on the details i just wanted to show the path for some reason then i could just add in here the path name and then that should show up all right so those are kind of the the big changes um that pretty much everyone is going to have to change in their projects if they're going to use version six so just to kind of recap there's no more switch switch has is been replaced with routes you have to use routes so anytime you create a route it has to be within this routes element and only route elements can go within routes and then component has been changed to element and in the element you can put any any jsx you want which i kind of like i mean i guess i guess that's that's a good change and then for redirect that no longer exists that's been replaced with navigate and then there's also this new used navigate hook the match and some of the other props aren't available anymore but i think that's that's pretty much it for some of the main ones and if you guys have other changes that i'm not thinking of right now you can go ahead and add those in the comments but hopefully this this helps some of you guys out and i'll be directing people to this video from the crash course because now when people go and take the crash course um they're going to get that error when they do the routing part so that kind of sucks for content creators when they update stuff like this but it just kind of comes with the territory so that's it guys thanks for watching and i'll see you next time

Channel: Traversy Media

Views: 34,538

Keywords: react router, react router 6, react router v6

Id: k2Zk5cbiZhg

Length: 13min 11sec (791 seconds)

Published: Sat Dec 04 2021