Estoy tratando de transferir esto a v6, sin embargo, parece que no obtuve la sintaxis correctamente. este código funciona perfectamente cuando se usa react-router v5.
Sé, por ejemplo, que la sintaxis de enrutamiento cambia.
Urls.js
import React from "react"; import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom"; import Login from "./components/Login"; import Home from "./components/Home"; // A wrapper for <Route> that redirects to the login screen if you're not yet authenticated. function PrivateRoute({ isAuthenticated, children, ...rest}) { return ( <Route {...rest} render={({ location }) => isAuthenticated ? ( children ) : ( <Redirect to={{ pathname: "/login/", state: { from: location } }} /> ) } /> ); }En la versión 6 react-router-dom , los componentes de Route personalizados se han ido, reemplazados por componentes de contenedor que manejan la lógica de representación de contenido o la redirección.
Un ejemplo de reemplazo podría ser el siguiente:
const PrivateWrapper = ({ isAuthenticated, children }) => { const location = useLocation(); return isAuthenticated ? ( children ) : ( <Navigate to="/login" state={{ from: location }} /> ); };Uso:
<Routes> <Route path="...." element={( <PrivateWrapper isAuthenticated={....}> <SomeProtectedComponent /> </PrivateWrapper> )} /> </Routes> Y para hacer que PrivateWrapper un poco más utilizable, puede representar un Outlet en lugar de un accesorio secundario para que se representen children componentes de Route anidados.
const PrivateWrapper = ({ isAuthenticated }) => { const location = useLocation(); return isAuthenticated ? ( <Outlet /> ) : ( <Navigate to="/login" state={{ from: location }} /> ); };Uso:
<Routes> <Route element={<PrivateWrapper isAuthenticated={...} />} > <Route path="...." element={<SomeProtectedComponent />} /> ..... other protected routes ...... </Route> </Routes>