<Route
exact
path="/register"
element={<Register />}
render={() => !isAuthenticated ? <Register/> : <Navigate replace to="/login" />}
/>
Okay so i want to redirect to login if user is not authenticated and "isAuthenticated" is normally set to false but it wont redirect me. Not a single error is logged. I replaced <Navigate /> with console.log("something") to see if there is something wrong with component imported from React-Router-Dom but that "something" is not logging. I tried all still don't know what is wrong. Thanks
isAuthenticated = false by default.
You want:
<Register/>But you put !isAuthenticated so it's the inverse:
<Register/>Why not: isAuthenticated ? <Navigate replace to="/login" /> : <Register/>.
Save me the headache.
Be explicit with the properties
<Navigate replace to="/login" />
/*or replace={false} */ <Navigate replace={true} to="/login" />
You are mixing react-router-dom v5 and v6 syntaxes. The RRDv6 Route components no longer take a render function prop (nor a component prop or children function prop) and now take only a single element prop taking JSX to render the routed content.
Remove the render prop and move the conditional logic into the element prop.
<Route
path="/register"
element={!isAuthenticated ? <Register /> : <Navigate replace to="/login" />}
/>
If this is a pattern you use often then abstract it into an AuthLayout component that conditionally renders an Outlet for nested routes you want to protect or the Navigate component to redirect.
const AuthLayout = ({ isAuthenticated }) =>
!isAuthenticated
? <Outlet />
: <Navigate replace to="/login" />;
...
<Route element={<AuthLayout isAuthenticated={isAuthenticated} />}>
<Route path="/register" element={<Register />} />
</Route>
Note: I think you've possibly mixed up what you want to render when isAuthenticated is true as generally you'd want to redirect to the authentication route when not authenticated.
In other words, if authenticated, render the routed component in the outlet, otherwise redirect to login route.
const AuthLayout = ({ isAuthenticated }) =>
isAuthenticated
? <Outlet />
: <Navigate replace to="/login" />;
You should lose "exact" from the routes, as it was changed in v6 version.
https://reactrouter.com/docs/en/v6/upgrading/v5
as per react router
<Route exact>is gone. Instead, routes with descendant routes (defined in other components) use a trailing * in their path to indicate they match deeply