Route Config with React Router v5

in this video we are going to learn how to have a central route config with react router version 5. now if you're familiar with the history of react router you'll know that version 3 and prior utilize route configs in order to declare your routes inside of your application but as of react router version 4 they move to to a more dynamic approach to creating your routes so we're going to do in this video is show how you can use an array to encapsulate all of your routes and to represent your essential route config if you prefer the old way of creating routes rather than the new dynamic way so we'll do as i just mentioned is we want to encapsulate all of our routes inside of a single array so you'll notice here we have two routes tacos and sandwiches both of which render the associated components here so we'll have a route array each item in this array is going to represent a particular route so the path for this first one will be tacos and the component that's going to be rendered is the tacos component we'll do the same thing up here for our sandwiches component and our sandwich is route so the path is going to be sandwiches i always spell this wrong so i'm just going to copy and paste it and then the component is going to be the sandwiches components so now that we have this array representation of our routes we can map over this array anywhere inside of our application in order to render our routes so let's do it down here we'll say round stop map for each route inside of our application we want to render a route component we need to pass to it what we would typically pass to it which is going to be a path which we can get from route.path exact even though we're not using it yet we also want to pass along route.exact and then the component that we want to render is going to come from route.component so now whenever we go to slash tacos are slash sandwiches there we go we have centralized our routes into this this routes array successfully creating a central route config you're probably not super impressed that's fine there's a very good chance your routes aren't this simple and so ending the video here would be more of a disservice than anything because all we've done is create an array and mapped over it so now what if we had some nested routes this is where things get a little bit more interesting so for example let's say tacos also had some nested routes here so again we'll make this an array the path for this is going to be let's do taco bus the component will be the bus component that we will make here in a second i'm just going to copy this and so we have bus we have cart and now let's make our two components i'm going to copy and paste these this will be bus this will be cart and then instead of being h2s let's make these just h3s so now it's not as simple as just mapping over our router array and rendering a route we also now have routes that have subroutes child routes so what we want to do is if we're mapping over a route that has subroutes we also obviously want to render those subroutes so let's abstract this logic into its own component we'll call this route with subroutes so what it'll do is it will take in a route and we're really just going to compose the route component from react router version 5 but pass to it the nested routes property if it exists so that way inside of that nested component we can then map over those subroutes and render a route for each subroute so we have a route here we want to pass through it two things as we saw earlier route dot path as well as exact which is coming from route dot exact we then just as we did earlier as well want to render the component which we can do by doing route route.component and then now we want to pass the subroutes down to this component that is being rendered so we can do that by saying route.routes so now if our route has a routes property on it we'll pass that down to the component that's being rendered and if it doesn't then we will just pass undefined down as the routes prop so now what we can do is let's swap this out right here our normal route for our route with subroutes we're just going to spread all of the route information on it and because we're using map we need to have a key so we'll just say route.path and so now our app should behave the exact same but the important part here is our tacos component because it has a routes property because it has sub routes we're passing this this array down to the tacos component so let's go and modify tacos now to accept that array and then again map over it and render some route with some more sub routes so we'll do is tacos is going to receive routes as i just barely mentioned let's have a div and then we'll have a header here of tacos let's create our nav bar here technically our nested navbar so the first link let's link to slash taco slash bus and the second one let's go to tacos slash cart and then now again we want to map over all of our routes and for each route inside of our nested routes render a route with subroute's component so i'm actually just going to come down here and copy this because it's going to be exactly the same so now what we've done is we have successfully abstracted all of our routing logic into its own array we have created a route with subroute's component that renders a route and then if that route has subroutes to it it passes those down as a prop so that in that nested component we can also map over the nested subroutes creating more route with subroutes so that's how you would have a central route config with react router version 5. version 6 actually in my opinion has a better solution than just abstracting everything to its own routes array but this is the react writer version 5 course not the version 6 course what's up youtube if you enjoyed this video i think you'll really like our react router version 5 course this course contains pretty much everything you would ever need to know about version five of react router i'll just read some of the topics here again it covers pretty much everything url parameters nested routes passing props programmatically navigating query strings four or four pages ambiguous matches passing props to links sidebars uh literally everything so it contains 19 different projects around four hours worth of video 23 000 words of text 16 different quizzes 16 exercises and then one project where you'll take everything you learn in the course and build it out so if you are wanting to learn version 5 of react router there's probably not a better place to do it and the reviews back that up if you want more information you can go to ui.dev slash react-router-version5 and check it out

Channel: uidotdev

Views: 2,482

Rating: 5 out of 5

Keywords:

Id: 9OO7cA_Egc4

Length: 7min 42sec (462 seconds)

Published: Thu Nov 19 2020