How to redirect to /dashboard public routes /login and /register if user is logged in and in all other cases show public routes?

Question

I have two types of routes Public and Private.

All private routes are accessible only if user is logged in:

return tokenService.token 
  ? (
    <>
      <Header />
      <Suspense fallback={<Spinner className="spinner" />}>
        <Outlet />
      </Suspense>
      <Footer />
    </>
  ) : (
    <Navigate to={'/login'} replace />
  );

Then we have public routes. Which can be accessible anywhere but /login and /registration routes even they are public if user is logged in they should be redirected to / dashboard in all other cases we show public route.

This is our file for public route

return (
  <>
    <AuthHeader />
    <Suspense fallback={<Spinner className="spinner" />}>
      <Outlet />
    </Suspense>
    <Footer />
  </>
)

Main routes file

<Routes>
  <Route element={<PublicRoute />}>
    <Route path={'/login'} element={<Login />} />
    <Route
      path={'/registration'}
      element={<Registration />}
    />
    <Route path={'/terms'} element={<Terms />} />
    <Route path={'/privacy'} element={<Privacy />} />
  </Route>
  <Route element={<AuthRoute />}>
    <Route path={'/dashboard'} element={<MyProfile />} /> 
  </Route>
  <Route path={'/notfound'} element={<PageNotFound />} />
</Routes>

So what would be the most efficient way to redirect "/login" and "/registration" routes to "/dashboard" route if user is logged in and in all other cases show public routes?

So user should be able to access "/terms" from anywhere but if he is logged in then he doesn't have access to "/login" and "/registration" routes (redirect to "/dashboard" ).

In current code even user is logged in he can access to all public routes.

Answer 1

Create an anonymous route protector for the log-in and dashboard routes that does the inverse of the private route protector.

Example:

const AnonymousRoute = () => {
  return tokenService.token
    ? <Navigate to="/dashboard" replace />
    : <Outlet />;
};

<Routes>
  <Route element={<PublicRoute />}>
    <Route element={<AnonymousRoute />}>
      <Route path="/login" element={<Login />} />
      <Route
        path="/registration"
        element={<Registration />}
      />
    </Route>
    <Route path="/terms" element={<Terms />} />
    <Route path="/privacy" element={<Privacy />} />
  </Route>
  <Route element={<AuthRoute />}>
    <Route path="/dashboard" element={<MyProfile />} /> 
  </Route>
  <Route path="/notfound" element={<PageNotFound />} />
</Routes>

Answer 2

You can check if user is logged in or not in each of login and registration page. For example:

useEffect(() => {
    if (userInfo) {
      userInfo?.user?.role === 'admin'
        ? navigate('/dashboard')
        : userInfo?.user?.role === 'client'
        ? navigate('/client-dashboard')
        : navigate('/translator-dashboard');
      return;
    }
  }, [])

In above snippet. what I did is to check if logged in user role. Based on user role I have navigate user to respective page. For your case you can do similar like this you have to check in login and registration page. Hope this concept will help you.