React Router v6: すべてのパスで「*」文字を正しくキャプチャできない問題の解決策

Question

我有以下两个文件

AppRoutes.tsx

import { Route, Routes } from "react-router-dom";
"../pages/NotFound" から NotFound をインポートします。
"../features/messages/routes/MessageRoutes" から MessageRoutes をインポートします。
「../pages/Home」からホームをインポートします。

デフォルト関数 AppRoutes() をエクスポート {
  戻る （
    <ルート>
      <ルートパス="/" 要素={<ホーム />} />
      <ルートパス="/messages/*" 要素={<MessageRoutes />} />
      <ルートパス="*" 要素={<NotFound />} />
    </ルート>
  );
}

MessageRoutes.tsx

import { Route, Routes } from "react-router-dom";
「../../../routes/ProtectedRoutes」から ProtectedRoutes をインポートします。
"../pages/MessageOverview" から MessageOverview をインポートします。
"../pages/NewMessage" から NewMessage をインポートします。

デフォルト関数 MessageRoutes() をエクスポート {
  戻る （
    <ルート>
      <ルート要素={<ProtectedRoutes />}>
        <ルートパス="/" 要素={<MessageOverview />} />
        <ルートパス="/new" element={<NewMessage />} />
      </ルート>
    </ルート>
  );
}

経路 "/messages/*" を使用して /messages で始まるすべての経路を捕捉しているため、これらの嵌合経路は MessageRoutes コンポーネントで処理されます。ただし、経路が「/messages/loremipsum」の場合、「/messages」以降のすべてのコンテンツが MessageRoutes アセンブリによって処理されるため、React ルーターは NotFound ルートを捕捉できません。

これが、すべての適合ファイルのルート構成要素に含まれることを意味するかどうか、私は在都で最後の を再度追加する必要があります;} />、最終的なすべてのルートの捕捉をサポートするため、このような方法は好ましくありません。

Answer 1

＃＃＃そのとおり。各

Routes コンポーネントは、一致できるルートの「スコープ」を管理します。たとえば、現在の URL パスが "/messages/loremipsum" の場合、ルート Routes コンポーネントは "/messages/*" と一致し、## をレンダリングします。正しくは#MessageRoutesコンポーネントです。その後、MessageRoutes コンポーネントの Routes コンポーネントは引き続き次のパス セグメントと一致します。 "*/loremipsum" のルーティング パスがないため、これを処理するには別の「キャッチオール」ルートが必要です。 問題は、

Routes

コンポーネントが、そのルートのいずれかがレンダリングする可能性がある 子孫 ルートを認識していないことです。 ＃＃＃例：＃＃＃ リーリー リーリー 別の「キャッチオール」ルートが必要な場合は、別のルート構成が必要です。

＃＃＃例：＃＃＃ リーリー

これで、URL パスが

"/messages/loremipsum"

の場合、

Routes

コンポーネントは、レンダリングしている

埋め込みを認識します。 ルーティングを設定すると、NotFound を正しく照合してレンダリングできます。