React Router v6: „*'-Zeichen können in allen Pfaden nicht korrekt erfasst werden. Problemlösung
P粉579008412
P粉579008412 2023-08-25 19:28:54
0
1
451
<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>
P粉579008412
P粉579008412

Antworte allen(1)
P粉458913655

是的,绝对可以。每个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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!