I'm trying to open a nested Route from within a nav element. The App itself runs under /app (as such I redirect any non existing URL to /app). Within the rendered Layout Component inside the /app Route I'm creating the main navigation as well as the Routes which should ultimately be the content. However once I click on Search or View, the URL gets changed to the correct path, but immediately redirects me to the /app it's as if the Routes "search" and "view" themself were non existent.
Minimal Example:
https://codesandbox.io/s/fragrant-field-ygwbf
App.tsx
<BrowserRouter>
<Routes>
<Route path="/app" element={<Layout />} />
<Route path="*" element={<Navigate to="/app" />} />
</Routes>
</BrowserRouter>
Layout.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>
);
};
Thanks for any advice
Take a look at the browser console, it shows you:
You rendered descendant (or called
useRoutes()) at "/app" (under ) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
So, the nested routes (deeper navigation according to the documentation) will never render and you cant see the Search and View sub-routes.
update (Thanks to Drew Reese):
in v6 all route paths are always exactly matched, no more path prefix matching like in v4/5. The parent/root paths need to specify the * wildcard so they can now "prefix" match.
Please change the parent
<Route path="/app">to<Route path="/app/*">.
So in the App.tsx:
<BrowserRouter>
<Routes>
<Route path="/app/*" element={<Layout />} />
<Route path="*" element={<Navigate to="/app" />} />
</Routes>
</BrowserRouter>
Edit on codesandbox