Estoy probando React Router V06, pero tengo un problema en el que lo he estado intentando de esta manera, pero todas las rutas y páginas están en blanco.
Código:
// Main App Function const App = () => { return ( <Router> <Fragment> <Navbar /> <Routes> <Route index strict path="/" element={<Landing />} /> **{/* Here I want to render paths from other function*/}** <Route element={<AppRoutes />} /> </Routes> </Fragment> </Router> ); }; export default App; // In AppRoutes Function const AppRoutes = () => ( <section className="container"> <Routes> <Route strict path="login" element={<Login />} /> <Route strict path="register" element={<Register />} /> <Route path="*" element={<NotFound />} /> </Routes> </section> ); export default AppRoutes;En la aplicación, declare que el componente Landing es la página de índice y represente AppRoutes en una ruta "/*" para permitir la coincidencia de subrutas.
aplicación
<Router> <Navbar /> <Routes> <Route index element={<Landing />} /> <Route path="/*" element={<AppRoutes />} /> </Routes> </Router>AppRoutes
const AppRoutes = () => ( <section className="container"> <Routes> <Route path="login" element={<Login />} /> <Route path="register" element={<Register />} /> <Route path="*" element={<NotFound />} /> </Routes> </section> );