React Router v6 : Impossible de capturer correctement les caractères "*" dans tous les chemins, solution au problème
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 } depuis "react-router-dom" ;
importer NotFound depuis "../pages/NotFound" ;
importer MessageRoutes depuis "../features/messages/routes/MessageRoutes" ;
importer l'accueil depuis "../pages/Home" ;
exporter la fonction par défaut AppRoutes() {
retour (
<Itinéraires>
<Route path="/" element={<Accueil />} />
<Route path="/messages/*" element={<MessageRoutes />} />
<Route path="*" element={<NotFound />} />
</Itinéraires>
);
}</pré>
<p><strong>MessageRoutes.tsx</strong></p>
<pre class="brush:php;toolbar:false;">import { Route, Routes } depuis "react-router-dom" ;
importer ProtectedRoutes depuis "../../../routes/ProtectedRoutes" ;
importer MessageOverview depuis "../pages/MessageOverview" ;
importer NewMessage depuis "../pages/NewMessage" ;
exporter la fonction par défaut MessageRoutes() {
retour (
<Itinéraires>
<Élément d'itinéraire={<ProtectedRoutes />}>
<Route path="/" element={<MessageOverview />} />
<Route path="/new" element={<NewMessage />} />
</Itinéraire>
</Itinéraires>
);
}</pré>
<p> Il s'agit d'une application AppRoutes. Il s'agit de l'URL du routeur React et de NotFound, ainsi que de "/messages" et de "/messages".的所有内容都将由 MessageRoutes 组件处理。</p>
<p> ;NotFound" =""> ;} /></route></code>获所有路由的方法吗?</p>
Oui, absolument. Pour chaque chemin d'itinéraire
Routes
组件都管理着自己可以匹配的路由的“范围”。例如,如果当前的URL路径是"/messages/loremipsum"
,根Routes
组件会匹配"/messages/*"
,并正确渲染MessageRoutes
组件。然后,MessageRoutes
组件的Routes
组件会继续匹配下一个路径段。由于没有"*/loremipsum"
, vous avez besoin d'un autre itinéraire "fourre-tout" pour gérer cela.Le problème est que le composant
Routes
n'a connaissance d'aucune route descendante que ses routes peuvent restituer.Exemple :
Si vous souhaitez un itinéraire « fourre-tout » distinct, vous avez besoin d'une configuration d'itinéraire distincte.
Exemple :
Maintenant, lorsque le chemin de l'URL est
🎜 composant connaît la route 🎜🎜imbriquée 🎜🎜 qu'il restitue et peut correspondre et restituer correctement"/messages/loremipsum"
,"/messages/loremipsum"
时,这个Routes
组件知道它正在渲染的嵌套路由,并且可以正确匹配并渲染NotFound
ceIntrouvable
. 🎜