React Router v6: Unable to correctly capture "*" characters in all paths problem solution
P粉579008412
2023-08-25 19:28:54
<p>我有以下两个文件</p>
<p><strong>AppRoutes.tsx</strong></p>
<pre class="brush:php;toolbar:false;">import { Route, Routes } from "react-router-dom";
import NotFound from "../pages/NotFound";
import MessageRoutes from "../features/messages/routes/MessageRoutes";
import Home from "../pages/Home";
export default function AppRoutes() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/messages/*" element={<MessageRoutes />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
}</pre>
<p><strong>MessageRoutes.tsx</strong></p>
<pre class="brush:php;toolbar:false;">import { Route, Routes } from "react-router-dom";
import ProtectedRoutes from "../../../routes/ProtectedRoutes";
import MessageOverview from "../pages/MessageOverview";
import NewMessage from "../pages/NewMessage";
export default function MessageRoutes() {
return (
<Routes>
<Route element={<ProtectedRoutes />}>
<Route path="/" element={<MessageOverview />} />
<Route path="/new" element={<NewMessage />} />
</Route>
</Routes>
);
}</pre>
<p>因为我使用路径 "/messages/*" 来捕获以 /messages 开头的所有路径,所以我的 MessageRoutes 组件负责处理这些嵌套路由。我在 AppRoutes 组件中有一个最终的 "*" 路由来捕获应用程序不支持的任何 URL。但是如果路径是 "/messages/loremipsum",react router 不会捕获 NotFound 路由,因为以 "/messages" 开头的所有内容都将由 MessageRoutes 组件处理。</p>
<p>这是否意味着在每个嵌套路由组件中,我现在都必须再次添加一个最终的 <code><route path="*" element="{<NotFound" ="">} /></route></code>,以支持最终的捕获所有路由?我不喜欢这种方法。难道没有绝对的最终捕获所有路由的方法吗?</p>
Yes, absolutely. Each
The problem is that theRoutes
component manages the "scope" of routes it can match. For example, if the current URL path is"/messages/loremipsum"
, the rootRoutes
component will match"/messages/*"
and render ## correctly #MessageRoutesComponent. Then, the
Routescomponent of the
MessageRoutescomponent will continue to match the next path segment. Since there is no routing path for
"*/loremipsum", you need another "catch-all" route to handle this.
Routes
Example:component is not aware of the
descendant routes that any of its routes may render."/messages/loremipsum"
,
the Routescomponent knows the
embed it is rendering Set routing, and can correctly match and render NotFound.