React Router v6：無法正確擷取所有路徑中的「*」字元問題解決方案

Question

<p>我有以下兩個文件</p> <p><strong>AppRoutes.tsx</strong></p> <pre class="brush:php;toolbar:false;">從「react-router-dom」匯入 { Route, Routes }; 從“../pages/NotFound”導入NotFound； 從“../features/messages/routes/MessageRoutes”導入 MessageRoutes； 從“../pages/Home”導入主頁； 導出預設函數 AppRoutes() { 返回 （ <路線> <路線路徑="/" element={<首頁/>} /> <路由路徑="/messages/*" element={} /> <路線路徑=“*”元素={<NotFound />} /> gt; </路線> ）； }</pre> <p><strong>MessageRoutes.tsx</strong></p> <pre class="brush:php;toolbar:false;">從「react-router-dom」匯入 { Route, Routes }; 從“../../../routes/ProtectedRoutes”導入ProtectedRoutes； 從“../pages/MessageOverview”導入 MessageOverview； 從“../pages/NewMessage”匯入NewMessage； 導出預設函數 MessageRoutes() { 返回 （ <路線> <路由元素={<受保護的路由/>}> } />> <路由路徑=“/new”元素={<NewMessage/>}/>/> </路線> </路線> ）； }</pre> <p>因為我使用路徑 "/messages/*" 來捕捉以 /messages 開頭的所有路徑，所以我的 MessageRoutes 元件負責處理這些路由路由。我在 AppRoutes 元件中有一個最終的 "*" 路由來擷取應用程式不支援的任何URL。但是如果路徑是"/messages/loremipsum"，react router 不會捕獲NotFound 路由，因為以"/messages" 開頭的所有內容都將由MessageRoutes 元件處理。</p> <p>這是否意味著在每個路由路由元件中，我現在都必須重新加入一個結束的 <code><route path="*" element="{<NotFound" =""> ; } /></route></code>，能支援最終的所有路由的路由嗎？我不喜歡這種方法。顧沒有絕對的最終捕獲所有路由的方法嗎？</p>

Answer 1

是的，絕對可以。每個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。