¿Cuál es el proceso correcto para las redirecciones en v6? Anteriormente estaba usando el siguiente código en v5, que funcionaba bien:
<Route path="/login"> {user ? <Redirect to="/" /> : <LoginStandard />} </Route>Sin embargo, me gustaría usar la misma lógica en esta versión. Cuando mi usuario haya iniciado sesión, me gustaría redirigir.
<Route path="/login"> <Route index element={<LoginStandard />} /> </Route>Utilice el componente Navigate para redirigir. Aún se debe aplicar la lógica de representación condicional y los componentes se deben representar en la propiedad del element del componente Route .
Ejemplo:
<Route path="/login" element={user ? <Navigate to="/" replace /> : <LoginStandard />} /> A menudo se considera una mejor práctica abstraer esto en un componente de protección de ruta personalizado que representa de manera condicional un Outlet para rutas anidadas o el componente Navigate .
Ejemplo:
import { Navigate, Outlet } from 'react-router-dom'; const AnonymousRoute = ({ user }) => user ? <Navigate to="/" replace /> : <Outlet />;...
<Route element={<AnonymousRoute user={user} />}> <Route path="/login" element={<LoginStandard />} /> ... other anonymous routes ... </Route> ... other routes