Lets take a look at how to render a component on a certain route conditionally using React router v6 features.
Check out my latest blog post on F...
For further actions, you may consider blocking this person and/or reporting abuse
I am a little late, but I was wondering, if you have multiple route that use the same condition as you (with the
loggedIn
boolean value), is there a way to move the condition out of the all those round and somehow wrap those routes with the condition to avoid repitition?perhaps you could create a routes array and the map it out?
I have an issue.
I do conditional render element like you did. But, I use permission instead of loggedIn. So I check if the user have permission to this route. the permission I get from backend API, and I store it on localStorage.
When the unAuthorized user has logged in, and logged out, next when the Authorized user logged in (user has permission) the route still protected. I still got redirected even the checker function return true (which is should return me the Element, not Redirect).
It will works fine when I refresh the page as Authorized user on the /dashboard routes (this is first page when user successfully logged in). Maybe the React Router not re-rendered automatically?.
I've force refresh the page if the user logged out. But it doesn't solve the problem.
Do you have some advice on this?
Thank you.
Yes I think there is a rendering issue.
You can try to create a custom Protected Route
Check out this link for more info .
This is what is suggest. Hope it works
@salehmubashar Can you Please add some examples or some demo so we can understand very well.
hmm, something like this may clear your mind.
For example we have a state that we can toggle with a button. We can add a function on the button to toggle the state which in turn shows/hides the component/route
Like instagram login and sign-up components???
yes that is a good use. You can set user roles with this so that only specific people or users
can access the Route. I recently created an app in which I wanted the users to be able to see a Route if they
had solved a quiz, so this trick came in handy
Thank you, helpful for me!
Clean solution, thanks for sharing 👏
Awesome, thanks!
Awesome!