<Route exact path="/register" element={<Register />} render={() => !isAuthenticated ? <Register/> : <Navigate replace to="/login" />} /> De acuerdo, quiero redirigir para iniciar sesión si el usuario no está autenticado y "isAuthenticated" normalmente está configurado como falso, pero no me redirigirá. No se registra un solo error. <Navigate /> con console.log("something") para ver si hay algún problema con el componente importado de React-Router-Dom pero ese "algo" no está registrando. Intenté todo todavía no sé qué está mal. Gracias
isAuthenticated = false por defecto. Usted quiere:
<Register/> Pero pones !isAuthenticated por lo que es el inverso:
<Register/> ¿Por qué no: isAuthenticated ? <Navigate replace to="/login" /> : <Register/> .
Ahórrate el dolor de cabeza.
Sea explícito con las propiedades
<Navigate replace to="/login" /> /*or replace={false} */ <Navigate replace={true} to="/login" />Está mezclando las sintaxis react-router-dom v5 y v6. Los componentes de la Route RRDv6 ya no toman una propiedad de función de render ( children una propiedad de component o una función de función secundaria ) y ahora solo toman una propiedad de un solo element que toma JSX para representar el contenido enrutado.
Elimine la propiedad de render y mueva la lógica condicional a la propiedad del element .
<Route path="/register" element={!isAuthenticated ? <Register /> : <Navigate replace to="/login" />} /> Si este es un patrón que usa con frecuencia, abstráigalo en un componente AuthLayout que representa de manera condicional un Outlet para las rutas anidadas que desea proteger o el componente Navigate para redirigir.
const AuthLayout = ({ isAuthenticated }) => !isAuthenticated ? <Outlet /> : <Navigate replace to="/login" />;...
<Route element={<AuthLayout isAuthenticated={isAuthenticated} />}> <Route path="/register" element={<Register />} /> </Route> Nota: creo que posiblemente haya confundido lo que desea representar cuando isAuthenticated es verdadero, ya que generalmente desea redirigir a la ruta de autenticación cuando no está autenticado.
En otras palabras, si está autenticado, represente el componente enrutado en la salida; de lo contrario, redirija a la ruta de inicio de sesión.
const AuthLayout = ({ isAuthenticated }) => isAuthenticated ? <Outlet /> : <Navigate replace to="/login" />;Debería perder "exacto" de las rutas, ya que se cambió en la versión v6.
https://reactrouter.com/docs/en/v6/upgrading/v5
según el enrutador de reacción
<Route exact>se ha ido. En cambio, las rutas con rutas descendientes (definidas en otros componentes) usan un * final en su ruta para indicar que coinciden profundamente.