Estoy tratando de abrir una ruta anidada desde dentro de un elemento de navegación. La aplicación en sí se ejecuta en /app (como tal, redirijo cualquier URL no existente a /app). Dentro del componente de diseño representado dentro de la ruta /app, estoy creando la navegación principal, así como las rutas, que en última instancia deberían ser el contenido. Sin embargo, una vez que hago clic en Buscar o Ver, la URL cambia a la ruta correcta, pero inmediatamente me redirige a /app, es como si las rutas "buscar" y "ver" no existieran.
Ejemplo mínimo:
https://codesandbox.io/s/fragrant-field-ygwbf
Aplicación.tsx
<BrowserRouter> <Routes> <Route path="/app" element={<Layout />} /> <Route path="*" element={<Navigate to="/app" />} /> </Routes> </BrowserRouter>Diseño.tsx
const Layout = () => { const navigate = useNavigate(); const handleSearchClick = (e: any) => { e.preventDefault(); // do some tasks navigate("inventory/search"); }; const handleViewClick = (e: any) => { e.preventDefault(); // do some tasks navigate("inventory/view"); }; return ( <div> <nav> <button onClick={handleSearchClick}>Search</button> <button onClick={handleViewClick}>View</button> </nav> <Routes> <Route path="/users"> <Route path="about" element={<p>example</p>} /> </Route> <Route path="/inventory"> <Route path="search" element={<Search />} /> <Route path="view" element={<View />} /> </Route> </Routes> The content of search / view should now be displayed below the Buttons </div> ); };gracias por cualquier consejo
Echa un vistazo a la consola del navegador, te muestra:
Representaste descendiente (o llamaste a
useRoutes()) en "/app" (bajo ) pero la ruta de la ruta principal no tiene "*" al final. Esto significa que si navega más profundo , el padre ya no coincidirá y, por lo tanto, las rutas secundarias nunca se representarán.
Por lo tanto, las rutas anidadas (navegación más profunda según la documentación) nunca se representarán y no podrá ver las subrutas Search y View .
actualización ( gracias a Drew Reese ):
en v6, todas las rutas de ruta siempre coinciden exactamente, no más coincidencias de prefijo de ruta como en v4/5. Las rutas principal/raíz deben especificar el comodín * para que ahora puedan coincidir con el "prefijo".
Cambie la
<Route path="/app">principal a<Route path="/app/*">.
Así que en App.tsx :
<BrowserRouter> <Routes> <Route path="/app/*" element={<Layout />} /> <Route path="*" element={<Navigate to="/app" />} /> </Routes> </BrowserRouter>Editar en codesandbox