React Router v6:无法正确捕获所有路径中的'*”字符问题解决方案
P粉579008412
2023-08-25 19:28:54
<p>我有以下两个文件</p>
<p><strong>AppRoutes.tsx</strong></p>
<pre class="brush:php;toolbar:false;">从“react-router-dom”导入 { Route, Routes };
从“../pages/NotFound”导入NotFound;
从“../features/messages/routes/MessageRoutes”导入 MessageRoutes;
从“../pages/Home”导入主页;
导出默认函数 AppRoutes() {
返回 (
<路线>
<路线路径="/" element={<首页/>} />
<路由路径="/messages/*" element={} />
<路线路径=“*”元素={<NotFound />} /> gt;
</路线>
);
}</pre>
<p><strong>MessageRoutes.tsx</strong></p>
<pre class="brush:php;toolbar:false;">从“react-router-dom”导入 { Route, Routes };
从“../../../routes/ProtectedRoutes”导入ProtectedRoutes;
从“../pages/MessageOverview”导入 MessageOverview;
从“../pages/NewMessage”导入NewMessage;
导出默认函数 MessageRoutes() {
返回 (
<路线>
<路由元素={<受保护的路由/>}>
} />>
<路由路径=“/new”元素={}/>/>
</路线>
</路线>
);
}</pre>
<p>因为我使用路径 "/messages/*" 来捕获以 /messages 开头的所有路径,所以我的 MessageRoutes 组件负责处理这些路由路由。我在 AppRoutes 组件中有一个最终的 "*" 路由来捕获应用程序不支持的任何 URL。但是如果路径是 "/messages/loremipsum",react router 不会捕获 NotFound 路由,因为以 "/messages" 开头的所有内容都将由 MessageRoutes 组件处理。</p>
<p>这是否意味着在每个路由路由组件中,我现在都必须重新添加一个结束的 <code><route path="*" element="{<NotFound" =""> ;} /></route></code>,能支持最终的所有路由的路由吗?我不喜欢这种方法。顾没有绝对的最终捕获所有路由的方法吗?</p>
是的,绝对可以。每个
Routes
组件都管理着自己可以匹配的路由的“范围”。例如,如果当前的URL路径是"/messages/loremipsum"
,根Routes
组件会匹配"/messages/*"
,并正确渲染MessageRoutes
组件。然后,MessageRoutes
组件的Routes
组件会继续匹配下一个路径段。由于没有"*/loremipsum"
的路由路径,您需要另一个“catch-all”路由来处理这个。问题在于
Routes
组件不知道它的任何路由可能渲染的后代路由。示例:
如果您想要一个单独的“catch-all”路由,那么您需要一个单独的路由配置。
示例:
现在,当URL路径是
"/messages/loremipsum"
时,这个Routes
组件知道它正在渲染的嵌套路由,并且可以正确匹配并渲染NotFound
。