React Router v6：无法正确捕获所有路径中的“*”字符问题解决方案
<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>
收藏
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
1
293
是的，绝对可以。每个
Routes组件都管理着自己可以匹配的路由的“范围”。例如，如果当前的URL路径是"/messages/loremipsum"，根Routes组件会匹配"/messages/*"，并正确渲染MessageRoutes组件。然后，MessageRoutes组件的Routes组件会继续匹配下一个路径段。由于没有"*/loremipsum"的路由路径，您需要另一个“catch-all”路由来处理这个。问题在于
Routes组件不知道它的任何路由可能渲染的后代路由。示例：
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> ); }import { Route, Routes } from "react-router-dom"; import ProtectedRoutes from "../../../routes/ProtectedRoutes"; import MessageOverview from "../pages/MessageOverview"; import NewMessage from "../pages/NewMessage"; import NotFound from "../pages/NotFound"; export default function MessageRoutes() { return ( <Routes> <Route element={<ProtectedRoutes />}> <Route path="/" element={<MessageOverview />} /> <Route path="/new" element={<NewMessage />} /> <Route path="*" element={<NotFound />} /> </Route> </Routes> ); }如果您想要一个单独的“catch-all”路由，那么您需要一个单独的路由配置。
示例：
import { Route, Routes } from "react-router-dom"; import MessageOverview from "../pages/MessageOverview"; import NewMessage from "../pages/NewMessage"; import NotFound from "../pages/NotFound"; import Home from "../pages/Home"; export default function AppRoutes() { return ( <Routes> <Route path="/" element={<Home />} /> <Route element={<ProtectedRoutes />}> <Route path="/messages"> <Route index element={<MessageOverview />} /> <Route path="new" element={<NewMessage />} /> </Route> </Route> <Route path="*" element={<NotFound />} /> </Routes> ); }现在，当URL路径是
"/messages/loremipsum"时，这个Routes组件知道它正在渲染的嵌套路由，并且可以正确匹配并渲染NotFound。