How to redirect user to home if they're already logged in and is trying to access the login page?

I have a component that redirects the user to whatever protected route they were trying to access after they log in via:

export const ProtectedRoute = () => { const { token } = useAuth() const location = useLocation() if (!token) { return <Navigate to="/login" replace state={{ from: location }} /> } return <Outlet /> }

and

setToken(token) const origin = location.state?.from?.pathname || '/' navigate(origin)

on login. This works by itself.

However I'm trying to add the functionality of redirecting the user home if they try to access the login page AFTER they've logged in and have been authenticated via:

export const RestrictedPublicRoute = () => { const { token } = useAuth() if (token) { return <Navigate to="/" replace /> } return <Outlet /> }

They seem to be fighting over navigation, as the preservation of previous routes is no longer preserved, as they are all being routed to "/" after logging in since the second navigation is overwriting the first the instant the user logs in and there is a token. How would i construct a case so the second navigation is only run when you try to access the login page while already logged in?

These are my routes:

<Route element={<ProtectedRoute />}> <Route path="/" element={<Home />} /> <Route path="dashboard" element={<Dashboard />} /> <Route path="admin" element={<Admin />} /> </Route> <Route element={<RestrictedPublicRoute />}> <Route path="login" element={<Login />} /> </Route>

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.