Protected Routes in ReactJS - React Router Dom

you could have make it more practical by using input with specified email/password that grant acces to each route after login

I think it's time for a new version of 'protected routes' tutorial. This seems outdated.

As always, he doesn't assume any knowledge of the viewer. Good work!

you sir are doing the gods work , thank you so much , cant really thank you enough

please do again for functional based components

why does this fucking library change their code in every 5 days.

Thank you so much. This is probably the simplest and easy to understand tutorial about Protected Routes

Creating a dedicated ProtectedRoute for every component is redundant. Is there a way to pass in all components you want to be protected in one statement?

Thank you for this video

Good tutorial, it'd be great if you could do the same for React Router v6

Whenever i search a specific video about react. I always find Pedro's tutorial much more understandable compare to the others. :)

any idea what to use instead of withRouter thats in this video?

sir can you make video of combining protected route and React.lazy and React.Suspense please

Thsnk you !!

Love your way of explanation brother! thanks for helping me alot!

please make with REACT ROUTER DOM 6(six)

how do you not get ncaught Error: [ProtectedRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> ??

Thank you! Just one question: is there any change in this workflow with the newest version of React-Router-dom? Or do we still need to do it like in the video? Thanks!

Thankyouu!! this is amazing tutorial!! could you tell us which react and react router dom version is being used in this tutorial ?

Hi , how we can check the availability of access token to check user is authenticated in this scenario?

What is wrong if i am going to do like this
{
auth ?
(routes to all my protected routers) :
(routes to all my unprotected routers)
}

great

Great content. Very helpfull Thanks

whenever i forgot how to do protected route i always come here hahaha fourth time <3 thx

What the f**k is Google doing with hindering our boy Pedro in moneitzing his great content? Wtf?

Great! Thank you so much!

How do I manage state though? It turns out whenever I route to a different path my previous states are lost, for instance whenever I am redirecting from login page to user page the auth state is lost and set to false and I am again redirected to login page. Do I need to use redux for the same? I am new to React js. If anyone can redirect me to a video I will be grateful.

Thank you man, you made it very clear :D

For some reason it is not working for me. It is entering the ProtectedRoute component and the condition isAuth is true, but it just won't render the Profile component, i've tried component={Profile} and component={<Profile/>}, none worked.

Great tutorial but unfortunately this is not even the 1/10 of making an authentication system in React :(

Great video professor you safe some souls. Thank you very much but please do a video in the case someone has different navigation menu from different users.

Trust me your channel is literally underrated.... I mean seriously man you just blew up my mind... keep posting such informative videos...god bless you

Hey PedroTech, I'm curious about how you do the line cleanup. Is there a keyboard shortcut youre using to stack your code like that? thanks for all the good work! You've been helping me out a lot with my PERN personal project.

Thanks

thank you very much, perfect video i was searching all day

Garotão, parabéns pelo conteúdo! Fera demais a ideia de criar um ProtectRoute!!

Hey buddy, Great video. Just wanted to add a small thing..Is there any way when the user redirects to login it pops a flash message such like "you need to login to access this page" something like that

absolute "banger"

if we dont have button like i have login page then who should we do

Only problem im having is on page refresh it sends me back to "/"

You forgot one point: How to pass information to the protected route:
You need to add props like this into it: <Component {...props} />

I'll not recommend this video to learn react authorization.

The most elegant way, thank you! 🚀

Great explanation. Thanks man.

OBRIGADAAAAA ME SALVOU! <3

i have my user dashboard protected now and if not logged in routes to login form but now i need to connect this to my login can you do a part 2 on how to connect this isAuth with user login page

the world needs u

Hey another great video!
Wondering if you know the reason for an error i am getting... (I have tried to join this video with your 2nd in the login series (one with cookies))
I am getting the following when trying to load the protected page - in my case called Home: Error: Invariant failed: You should not use <Route> outside a <Router>
I believe it to be something around the line here:
import React from "react";
import { withRouter } from 'react-router-dom'
function Home() {
return <div>this is a test</div>;

}
export default withRouter(Home); <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< as removing the withRouter lets the page load fine (albeit not protected)

<Router>
<Switch>
<ProtectedRoute path="/Home" component={Home} isAuth={isAuth} />
<Route path="/" exact component={Login}></Route>
<Route path="/Register" exact component={Register}></Route>
<Route path="*" exact component={Login}></Route>
</Switch>
</Router>


Have tried going back through the video 3 times and cannot see what i am doing wrong, if you can point it out that would be amazing! Thanks

Thanks, man, for an amazing explanation!