Protected Routes in React Router v6

what's going on happy thanksgiving um i know i had a great one i hope you did as well so today i'm going to be showing you how to do protected routes in react router version 6. so here i got a little example already set up i got um three links globally in my app like at the root level and then my routes rendering on the bottom so when our user's not logged in we want them to only be able to see the sign in page and we do not want them to be able to go to the home page or the account page and we don't want them to be able to type slash home and then just go to that page we don't want that so let's get started so first of all um let me just show you i got some routes here and it's pretty simple what we're gonna do so let's just create a file let's call it protected routes.jsx and in here we're also going to make another hook in this file and let's call it use auth so basically like um here you would authenticate like return true or false if you're authenticated i'll give you a little example so let's say we got a an object user and logged in is set to false obviously um you wouldn't do this you would probably have it in a context or maybe communicate with your server back-end but for this little example we're just going to hard code it right here so you just want to like do something like this return user and user dot logged in is true then you can go in here and do const is off equals use auth right and then here we would want to do um a conditional rendering so if the user is authenticated so we're going to do the ternary operator so if they're authenticated we can just return the outlet component and if you don't know what the outlet component does i'll explain it in a second and if they're not authenticated you can just render the sign in page okay so then we would go over here to our routes and wrap our routes in a route and the element is protected routes basically um the outlet component lets you do nested routes so um anything that's nested under protected routes would render in as the outlet component all right so right now our users logged in set to false so let's try to navigate to um the home page in the account page as you can see our path in the url changes but it's only rendering the sign in page and this is a viable solution you know it's not a shabby one i'd say but you could do something else you could uh navigate the user to the sign in page right so then it doesn't change to slash home but it navigates them but then you might get like a little flicker which um might not be a problem but i don't i prefer not to have that so there's multiple ways to do this but you pretty much got the whole point you pretty much can nest your routes in a protected route and do all the logic here alright so thanks for watching and have a good one i'll see you next time

Channel: Lester Fernandez

Views: 1,866

Keywords: Lester Fernandez, lester, coding, programming, react, full, stack, code, web, javascript, end, v6, routes, router, react-router, react router, react router v6, new, 2021, 2022, how, to, protected, authenticated, protected routes, in, outlet, nested, react-router-v6, nested route, easy, short, js, version, hooks, functional, function, jsx

Id: 0x8Dap2EIVE

Length: 4min 10sec (250 seconds)

Published: Mon Nov 29 2021