React Router v6: „*'-Zeichen können in allen Pfaden nicht korrekt erfasst werden. Problemlösung
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";
NotFound aus „../pages/NotFound“ importieren;
Importiere MessageRoutes aus „../features/messages/routes/MessageRoutes“;
Home importieren von „../pages/Home“;
Standardfunktion AppRoutes() exportieren {
zurückkehren (
<Routen>
<Route path="/" element={<Home />} />
<Route path="/messages/*" element={<MessageRoutes />} />
<Route path="*" element={<NotFound />} />
</Routen>
);
}</pre>
<p><strong>MessageRoutes.tsx</strong></p>
<pre class="brush:php;toolbar:false;">import { Route, Routes } from "react-router-dom";
importiere ProtectedRoutes aus „../../../routes/ProtectedRoutes“;
MessageOverview aus „../pages/MessageOverview“ importieren;
importiere NewMessage aus „../pages/NewMessage“;
Exportieren Sie die Standardfunktion MessageRoutes() {
zurückkehren (
<Routen>
<Route element={<ProtectedRoutes />}>
<Route path="/" element={<MessageOverview />} />
<Route path="/new" element={<NewMessage />} />
</Route>
</Routen>
);
}</pre>
<p>因为我使用路径 „/messages/*“ Die Funktion „/messages“ ist die neueste Version von MessageRoutes Die AppRoutes-AppRoutes-AppRoutes-AppRoutes-AppRoutes-AppRoutes-AppRoutes-AppRoutes-AppRoutes-AppRoutes-AppRoutes-AppRoutes-AppRoutes Suchen Sie nach der URL „/messages/loremipsum“. Stellen Sie sicher, dass MessageRoutes nicht verfügbar ist.</p>
<p>我现在都必须再次添加一个最终的Gefunden" =""> ;} /></route></code>获所有路由的方法吗?</p>
是的,绝对可以。每个
Routes
组件都管理着自己可以匹配的路由的“范围”。例如,如果当前的URL路径是"/messages/loremipsum"
,根Routes
组件会匹配"/messages/*"
,并正确渲染MessageRoutes
组件。然后,MessageRoutes
组件的Routes
组件会继续匹配下一个路径段。由于没有"*/loremipsum"
的路由路径,您需要另一个“catch-all”路由来处理这个。问题在于
Routes
组件不知道它的任何路由可能渲染的后代路由。示例:
如果您想要一个单独的“catch-all”路由,那么您需要一个单独的路由配置。
示例:
现在,当URL路径是
"/messages/loremipsum"
时,这个Routes
组件知道它正在渲染的嵌套路由,并且可以正确匹配并渲染NotFound
。