Tengo una plantilla de reacción y usa react-router-dom v6.0.0 beta. Los métodos de enrutamiento son diferentes en esta versión que en las anteriores. Quiero autenticar la solicitud usando la función auth.js y mostrar la página adecuada. En react-router v5, solo tenía que envolver la ruta en el elemento <ProtectedRoute> . ¿Cómo puedo obtener el mismo resultado en este enfoque?

rutas.js

 export default function Router() { return useRoutes([ { path: '/dashboard', element: <DashboardLayout />, children: [ { path: '/', element: <Navigate to="/dashboard/app" replace /> }, { path: 'app', element: <DashboardApp /> }, ] }, { path: '/', element: <LogoOnlyLayout />, children: [ { path: 'login', element: <Login /> }, { path: 'register', element: <Register /> }, { path: '404', element: <NotFound / }, { path: '/', element: <Navigate to="/dashboard" /> }, { path: '*', element: <Navigate to="/404" /> } ] }, { path: '*', element: <Navigate to="/404" replace /> } ]); }

autenticación.js

 function ProtectedRoute({ component: Component, ...restOfProps }) { const isAuthenticated = false; return ( <Route {...restOfProps} render={(props) => isAuthenticated ? <Component {...props} /> : <Redirect to="/login" /> } /> ); } export default ProtectedRoute;

Aplicación.js

 import Router from './routes'; export default function App() { return ( <Router /> ); }