What is the correct way to implement the web version of <Protected> ? #20
Unanswered
Albert-Gao
asked this question in
Q&A
Replies: 1 comment 2 replies
-
Usually on the web, I would be something like this: function Protected({ children }) {
const { isAuth } = useAuth()
return isAuth ? children : <Navigate to={'/login'} />
} The API for the is here : https://reactrouter.com/en/main/components/navigate It is just a componentized way to do the navigate, as you can see in the code above, i am trying to do something similar, if we have something like this, then my current folder structure would just work without any problem. Actually, it works, just the accessing directly does not work, if we can make this part work, then we are all good here, you can wrap all authed routes with this layout, then you are done. :) |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
trying to add a layout wrapper for differentiating the authed and unauthed routes. It is all about web.
What is the expected behavior:
/dashboard
, which is protectedWhat is the current behavior:
/dashboard
/dashboard
directly from the URL with no auth state, it takes the user to/
, and stuck at the element returned from rather than honoring thelink.push('/login')
This is what happened after accessing
/dashboard
from URL with non-auth state:wondering what i am missing here :)
related to this
#14
Beta Was this translation helpful? Give feedback.
All reactions