The New Way To Create Protected Routes With React Router V6

hey what's going on everybody so today i want to do a quick video and show you how to create protected routes with react and specifically using react router 6. so we went through a change recently from react router 5 to react router 6 and this always creates conflicts when you're trying to upgrade your version of react or react router so i just want to show you how i did this before and then how to update your application so essentially a protected route is going to be a route that we want to protect from an unauthenticated user or maybe a user that doesn't have certain permissions so we just created a bare bones application and then we're just gonna go ahead and modify it so at this point i just spun up a simple react application i created three different pages we have a home component right here for a page a login page and a products page so this is here just for demo purposes it's a simple component with nothing else in it and in here the way we used to do this before so i actually went through and created it the old way is we created this private route right here so essentially with react we have react router dom and then we wrap everything inside of a router and we use a route to pass in a component and then we have a path to specify what component is gonna be rendered out based on that path so to create a private route what we did here is we essentially extended this route component so we created a component called private route and if you look at the functionality it still takes in a component a path and everything that would go into route so it's actually a route here so essentially this private route takes in all the parameters here with all the children that go into it and then for authentication don't worry about that if you're using something like redux context api i'm going to leave this part up to you so essentially we're just setting a status of true or false if this user has something like a json web token so we're just replicating what that might look like now in here we pass in that route component and then we just use a spread operator we check if the user is authenticated if they are then we can render our component if they're not so in this case if they're not authenticated we just redirect a user to the login page so that's all we had up until this point so right now i have react router dom version 6 installed if i look at my server here this will not work if i open this up here and let me actually try to open up the application too so right now we're having this issue because of a few conflicts that we currently have in this application so we have the latest version of react router dom and for some reason i can't close that out so there we go so there's a few things going on here so i have this article to actually go with this video and i talk about the old method so i highly recommend looking in the video description and check out this article as you're going through this but here i highlight the old way of doing things and then i talk about the issues of what's happening here so the first issue here is that we no longer have the redirect component so redirect is now navigate so the fact that i'm using redirect right here well that's our first issue so we can't use that anymore now the next issue is the fact that we now have a routes component so we didn't have this before and routes is replacing the switch component that we used before so essentially what we do now and let's just go through this and i'll actually start coding along and fixing these so what we do now is we import routes right here so in react router 6 we have to wrap everything inside of the routes component so let's go ahead and if you're starting from scratch go ahead and do this so go ahead and wrap this with routes like this we'll close this up and now we have all of our components so i'm going to fix this indentation whoops what am i doing here okay so now we have our router we have routes and then we use a route right here and i'm just going to comment out the private route for now so if we go into our private route component now what we need to do is go ahead and change redirect to navigate and now let's talk about the next issue so with this route component what this needs to take in so all the children right here need to be a route component so the direct children of a routes component need to be a route well here what we're doing is we're extending that so right away this route component is no longer a direct child if we're using this method so this will no longer work here so we need to fix this because that's gonna be the conflict a route component needs a route directly and here that wasn't the case so we need to update this so let's go back into our article and let's check this out here so to update this what we're going to do what we're going to do here is we're going to use a component called outlet so outlet essentially allows us to nest our routes here so we're going to use outlet to actually extend one of our routes here so we're still using the routes component but in this case what we're going to do is we're just going to go ahead and change route to outlet so we're just going to go ahead and add outlet and we need to change this condition here so if we go down here let's go ahead and look at this so we import navigate from react router dom along with outlet we still have our authentication and now all we're going to do is we're just going to go ahead and check for our authentication token if we're authenticated then we're just going to go ahead and say go ahead and render out the child routes so we're still having routes right here so outlet basically allows us to pass those down and then if we're not authenticated we're just going to use navigate to redirect a user so let's go ahead and get rid of all of this so we don't need to pass these in anymore and we're just gonna clean all of this up right here and write this from scratch so we're gonna go ahead and say if auth token here so we're gonna ask this question if everything checks out if we have an authentication token we're just gonna go ahead and pass in outlet so we'll do outlet and that's rendered out and then if we don't have an authentication token let's go ahead and use navigate and we're just going to redirect our user and we're going to specify two so it's a lot like redirect here and we're just going to say go ahead and send the user back to the login page so this is now our private route but the thing is with this is we can actually pass in multiple routes in here so we're just nesting routes here so let's just change the name from private route to private routes because that's a little bit more proper here so we'll save that and then inside of app.js let's import private routes and private routes right here so we'll save all of that and in here what we're going to do is we're just going to go ahead and update how we render this out so we're going to create a route and the element will be the private route so let's go ahead and do this so we'll create a new route here and at this point what we're going to do is go ahead and nest this so we're going to do an opening and closing tag and then for the element so we actually have to change this to elements so that's the first thing in react router 6. components are now element here so we need to modify that and we need to pass in the actual component so before i forget about all of this okay so log in and there's a lot of good videos out there traversing media has a good video out out on this academic has a good video out on this so if you want to see the differences between react router 6 and 5 go ahead and check those out so for this element let's go ahead and pass in private routes so we'll pass in the private routes component now and in here we're just going to go ahead and pass in all those routes that we want to protect here so we're just going to go ahead and use route again so now we're just using route so if you look at it we're nesting it we have a route within a route and then here we will treat it just like any other component we throw an element and then we pass in the element that we want so we do home for the home component and then for the path here we would just treat it like a normal component we do path that's going to be forward slash and then we want to make sure that this is an exact match so we will set that and then let's copy and paste this and we'll just use our products page here so we just created some kind of page here and then this does not have to be an exact match so we'll just do products okay so i think i updated everything let's go ahead and check the terminal let's see we might have another issue but if anything i'll just restart it let's give this a shot all right so we have one more issue private routes in private rounds so i forgot to rename the file here so let's go ahead and make this plural we'll make or we'll throw in an s right there and then that should solve our issue okay so now let's check this out so we're in our login page if we try to go to the home page it redirects us back to the login page if we try to go to products we can't go there because it's protected so what we're going to do is we're just going to go ahead and go into private route let's imagine that this user logged in so we'll change this to true save that and let's try this again so now i can go to the home page here i can go to products everything's working and if i set this back to false let's say this user logged out we no longer have that token we are redirected back to the login page so that's it i just wanted to show you how to implement that real quick um if you have any ideas on how to do this better or suggestions uh let me know i've seen a few methods and this is the simplest way to do it i'm not sure if it's exactly the best best way to do that so let me know in the comments section i would love to get some feedback on this and make sure you check out the article too this is linked up in the video description so thanks for watching i hope that was helpful

Channel: Dennis Ivy

Views: 161,908

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov

Id: 2k8NleFjG7I

Length: 9min 19sec (559 seconds)

Published: Fri Jun 03 2022