0
289
VistasRutas anidadas reaccionar-router v6
Estoy tratando de dar sentido a algunas rutas anidadas. No estoy seguro si lo configuré correctamente.
Tengo un componente llamado Dashboard que contendrá todo el contenido, pero si la ruta no coincide, mostrará una página 404. Cuando trato de presionar /sobre esto, ¿me dirige a la página 404 todo el tiempo?
3 Respuestas
Responde la pregunta0
Esto es probablemente lo que estás buscando:
https://codesandbox.io/s/react-router-v6-bifurcado-v6xtk
• Como sugirió Muhammed Jaseem , todas sus rutas deben incluirse en un solo componente.
• También es una buena práctica crear un componente js/jsx por página.
0
Se supone que las rutas se definen en el archivo app.js.
Supongo que desea servir el componente 'Acerca de' cuando se pulsa '/home/about'. Para lograr esto, debe anidar las definiciones de ruta como:
<Route path="/home" element={<Dashboard />}> <Route path='/about' element={<About />}/> <Route path='/contact' element={<Contact />} /> </Route>Por supuesto, los componentes 'Acerca de' y 'Contacto' deben estar en sus propios archivos e importarse de la misma manera que importó el componente 'Tablero'.
Finalmente, los atributos 'a' de los componentes 'Enlace' en su Dashboard.js deben cambiarse a la ruta completa, por ejemplo, '/home/about'.
0
usar
<Route path="/home/*" element={<Dashboard />} />
y
<Link to="contact" className="link">Contact</Link>