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