admin管理员组文章数量:1326611
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:
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
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
Share Improve this question asked Nov 12, 2021 at 9:55 LavarietLavariet 6452 gold badges9 silver badges17 bronze badges3 Answers
Reset to default 2The Problem
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.
The Solution
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
you can use
navigate("view")
instead of navigate("/view")
Because:
the root route link is https://inventory
- with
navigate("view")
the link would behttps://inventory/view
- with
navigate("/view")
the link would behttps://view
Without the *, the parent route doesn't know to match any deeper paths like /parentpath/childpath.( example:/settings/privacy )
<Route path={${ROUTE.SETTINGS}/*
} element={isAuthenticated ? : } />
you should use the * inthe app.js ponent then only you can use the nested routing
本文标签: javascriptHow can I navigate to a nested Route in React Router Dom V6Stack Overflow
版权声明:本文标题:javascript - How can I navigate to a nested Route in React Router Dom V6 - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742213225a2434097.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论