<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

CodePudding user response：

I think you use element and render props together. Try to remove element

CodePudding user response：

1. Logic error?
   

isAuthenticated = false by default. You want:

• false > 'Login'
• true > <Register/>

But you put !isAuthenticated so it's the inverse:

• false > <Register/>
• true > 'Login'

2. Change the ternary into something more easily comprehensive.

Why not: isAuthenticated ? <Navigate replace to="/login" /> : <Register/>.
Save me the headache.

3. Navigate properties

Be explicit with the properties

<Navigate replace to="/login" />
/*or replace={false} */ <Navigate replace={true} to="/login" />

CodePudding user response：

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

CodePudding user response：

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" />;

CodePudding user response：

You can solve that by checking in Register component.

const navigate = useNavigate();

useEffect(()=>{
  if(isAuthenticated){
    navigate('/');
  }
},[]);