Three Popular Ways To Create Protected Routes In React Using React Router

so in this video we'll see how to create protected route in three different ways so these are the three popular ways you can use to to create a protected route so I have created this application using VJ you can see it's running on this URL let me walk you through this so this app component we are using browser router and these are the various components I have created home login orders count card payment and that's it so these are all the components inside component folder this just displays some heading so you can see this is home homepage this is login page this order page and this is the payment page so I can this is the homepage so you can see hom page is displayed when I go to orders you will see orders page then I go to P payment you can see payment page so now I want want to implement the protected route so this login and slash are public routes so anyone can access but order payment and card these three routes should be private so only if you are logged in I should be able to access this route so how can you do that so for that I have declared a state is logged in state and in the login component you can pass that function update status so I'm updating that particular value of is logged in by passing it to login component as a prop so whenever I'm logged in I will be set calling this function which will change that is logged in value from false to true so here I using updator function syntax so if the current value is false it will become true and if it's true it will become false so now I have this e logged in flag which I can use to identify and show whether that page should be rendered or not and also note that I'm using react router Dom version six so this is all version six code so which is the latest version so now here I can add the condition so I can render this conditionally so if is logged in then only display this component otherwise I can use the navigate component from react router Dom you can see imported and I will redirect to the homepage so if I am logged in then only I will be able to see orders page otherwise I I will be redirected to the homepage so right now is logged in value is false so let's try to access the orders page you can see I am redirected to the homepage because I I'm not logged in but let me change this to true now and if I try to access this order page now you can see it order page correctly getting display so this is the one way you can use to add that protected so you can add this condition for all of the components and can add it here so this here let me copy p and this will be payment so now orders card I can directly access because I'm logged in I can also access payment but if I am not logged in so this value is false so you will be updating that once user is logged in so if I try to access orders now you can see you are redirected to homepage same is the case with car or if I try to access payment you can see you see this homepage so you are not able to access that so that is how you can create a protected route so this is one way and another way is using creating a separate private route component so inside this components folder I can create private route do jsx and here I will accept the children prop and also is logged in prop so if user is logged in then only I will render this children otherwise I will again navigate to equal to slash so you can see this private route component if I'm logged in then I will render the children otherwise I will redirect so now what is children so this private route I will I can use it here so this is for orders so I can mention this private route import it and in between the opening and closing tag so this is opening tag and this is closing tag in between I can add that so now this orders component will go as a children prop inside the private route component so if I'm logged in I'm rendering that children prop that is orders page so now I also need e logged in because that is also prop I am accepting so now this is now this prop is going to private route as a prop you can see so right now the value of his logged in is false so if I try to access this order page I will not be able to access so if I go to orders you can see I'm redirected to homepage so this is another way you can use so either this conditional directly or you can use this way of creating a private route and render this children so here whatever you add that will go as a children so I can also display H3 here so this will also go as a children so when I try to access orders right now I will not be able to access but if if I make it true so now I'm logged in so when I try to access orders you can see orders page is displayed and hello the text is also dis so whatever you pass in between the opening and closing tag of this private route component so these things will go as a children prop and you are also passing this is logged in as a children so private route has two props children and is locked let me remove this so these are the two ways you can use the another way is creating a protected route or you can call it private route also but as we have already created private route I will call it protected route now what this will be the case so you can see with either this or this way the code is getting complicated so you are repeating the same thing again and again so what you can do is you can create a route component here so not a self closing tag you can see we are doing self closing here but here I'm click opening and closing that tag route make sure it's route not routes so inside routes we are declaring a route now here I will move all of these routes so let me remove all of this so this will be just orders let me add it in between here this will be orders this will be C this will be payment now I don't need these routes now for this route I can add a element prop and here I can say protected rout now this is another way you can use to declare routes so now this private route component will always render and here you have this order SL order SL card SL payment rout so now inside this protected route you can pass this is logged in now here is logged in so now again inside protected route you can get this is logged in and here I can check if user is logged in then whatever I am rendering the route the matching route so if I'm going to slash orders and if I am logged in then I will be rendering that orders so this is known as nested route so inside this protected route we are nest these routes so to display the nested routes we need to use the outlet component from react router on so if user is logged in we are rendering whatever we are passing as a route so whatever route we have defined we are accessing that will be rendered using that outlet and if user is not logged in then I will again navigate so now this is a protected so now this protected route so whenever I try to access SL orders or slash card or slash payment this component will always gets executed and we are passing e Lo here what I'm doing whatever route I'm passing that will get displayed otherwise I'm redirecting to the slash R so now right now the value of is logged in is true so right now I am logged in so you can see you see this order page if I try to access cart you can see cart is also getting displayed so now if I make this false and if I try to access orders you can see you are not able to access you are redirected to the homepage so same is the case with payment so if I am not logged in then I cannot access any of these routes so these are all nested routes nested inside this protected so if you want to render anything which is nested you use this Outlet component which is coming from react router so if you are not aware of react router these outlets and all other things you can check out the link in the description for my react router 6 crash course so here we have one more thing so here I have added not found Route so if you are accessing some route which does not exist you will be redirected to homepage so this is a good thing so if you want to uh if user try to access some invalid route let's say slel he will be redirected to the homepage so he will not see the blank page so if I don't add this then if I try to access help you can see you see this blank page which is not a good user experience so whenever you are defining routes always make sure you add a new route with path equal to Star and element equal to you can display some component page not found or you can also navigate to slash so this route you can declare as the last route so if any of the above paths does not match this component will be executed and whatever code you have written that will be executed here we are just redirecting to slash you can also create a not font page component and display that page is not found so you can do that so these are the three ways you can use to protect your routes and implement the protected route functionality so you can either directly add condition here or you can use this private route or you can use this protected routes by nesting these routes so this makes your code simpler so all these are now public routes outside and all these are now private rout so if you want to make any other route as private you add it just here so inside this route you can add any other route that you want to make it private so only if I'm logged in then only I will be able to access that so that's it for this video if you found it useful do like it and don't forget to subscribe to the channel

Channel: Coding Mastery

Views: 2,250

Keywords: javascript, react, react router, react router dom, react router dom v6, protected routes react router v6, private route in react router v6, private route

Id: SQlB7GXFRR4

Length: 13min 23sec (803 seconds)

Published: Mon Dec 04 2023