Necesito volver a la URL solicitada original después de iniciar sesión.
Por ejemplo, el usuario ingresa www.example.com/settings ya que el usuario no está autenticado, navegará a la página de inicio de sesión www.example.com/login .
Una vez autenticado, debería volver a www.example.com/settings automáticamente.
Mi enfoque original con react-router-dom v5 es bastante simple:
const PrivateRoute = ({ isLoggedIn, component: Component, ...rest }) => { return ( <Route {...rest} render={(props) => isLoggedIn? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: `/login/${props.location.search}`, state: { from: props.location } }} /> ) } /> ); }; <PrivateRoute exact isLoggedIn={isLoggedIn} path="/settings" component={Settings} />¿Puede alguien decirme cómo hacer eso en v6? Gracias por adelantado
En react-router-dom v6, la representación de rutas y el manejo de redireccionamientos es bastante diferente que en v5. Atrás quedaron los componentes de ruta personalizados, se reemplazaron con un patrón de componente de envoltura.
v5 - Ruta personalizada
Toma accesorios y representa condicionalmente un componente de Route con los accesorios de ruta pasados o un componente de Redirect con estado de ruta que contiene la location actual.
const CustomRoute = ({ isLoggedIn, ...props }) => { const location = useLocation(); return isLoggedIn? ( <Route {...props} /> ) : ( <Redirect to={{ pathname: `/login/${location.search}`, state: { location }, }} /> ); };...
<PrivateRoute exact isLoggedIn={isLoggedIn} path="/settings" component={Settings} />v6 - Envoltorio personalizado
Toma props y representa condicionalmente un componente Outlet para que los componentes de Route anidados se representen o un componente Navigate con estado de ruta que contiene la location actual.
const CustomWrapper = ({ isLoggedIn, ...props }) => { const location = useLocation(); return isLoggedIn? ( <Outlet /> ) : ( <Navigate to={`/login/${location.search}`} replace state={{ location }} /> ) };...
<Route path="settings" element={<CustomWrapper isLoggedIn={isLoggedIn} />} > <Route path="settings" element={<Settings />} /> </Route>