Tengo el siguiente problema. mi ruta no está registrada y no sé por qué.
Enlaces
tablero.jsx
este código genera todos los enlaces.
<div className="flex w-3/4 m-auto flex-col mt-10 xl:w-1/2"> {questions.map(({ id, question }) => { return ( <Link to={`/dash/${id}`}> <QuestionHeader question={question} /> </Link> ); })} </div> /dash/1,/dash/2,.... are generated by the map function above.tengo dos archivos que representan las rutas.
Rutas de navegación
const NavRoutes = () => { return ( <Routes> <Route path="/:id" element={<Question />} /> <Route path="" element={<Dashboard />} /> </Routes> ); }; export default NavRoutes;aquí está el componente principal
const Main = () => { return ( <div> <NavBar /> <NavRoutes /> <Footer /> </div> ); }; export default Main;y las principales vías de autenticación y acceso a la página principal
const App = () => { let { user } = useAuthContext(); return ( <div className="w-full bg-slate-700 block fixed h-full"> <Header /> <Router> <Routes> <Route path="/dash" element={!user ? <Navigate to="/auth" /> : <Main />} > </Route> <Route path="" element={<Login />} /> </Routes> </Router> </div> ); }; cuando trato de acceder a /dash/1 , aparece el siguiente error
router.ts:11 No routes matched location "/dash/1"¿Intentó lo siguiente en sus NavRoutes (anteponiendo '/ dash' a '/: id'):
<Route path="/dash/:id" element={<Question />} />Resolví esto haciendo lo siguiente
const App = () => { let { user } = useAuthContext(); return ( <div className="w-full bg-slate-700 block fixed h-full"> <Header /> <Router> <Routes> <Route path="/dash/*" element={!user ? <Navigate to="/auth" /> : <Main />} > </Route> <Route path="/auth" element={<Login />} /> </Routes> </Router> </div> ); };debe incluir un * al anidar más profundo