React Router v6 : Impossible de capturer correctement les caractères "*" dans tous les chemins, solution au problème
P粉579008412
P粉579008412 2023-08-25 19:28:54
0
1
491
<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>
P粉579008412
P粉579008412

répondre à tous(1)
P粉458913655

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 :

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>
  );
}

Si vous souhaitez un itinéraire « fourre-tout » distinct, vous avez besoin d'une configuration d'itinéraire distincte.

Exemple :

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>
  );
}

Maintenant, lorsque le chemin de l'URL est "/messages/loremipsum", "/messages/loremipsum"时,这个Routes组件知道它正在渲染的嵌套路由,并且可以正确匹配并渲染NotFoundce

🎜 composant connaît la route 🎜🎜imbriquée 🎜🎜 qu'il restitue et peut correspondre et restituer correctement Introuvable . 🎜
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal