React-router v6 のブレッドクラム ナビゲーションと部分一致ルーティング

Question

私は、react-router-dom v6.8.1 (現時点での最新バージョン) を使用しており、以前はパンくずリストを設定するために use-react-router-breadcrumbs というサードパーティ ライブラリを使用していましたが、そのドキュメントによると、現在、「組み込みの反応ルーターメソッド」を使用することが推奨されています。ドキュメントはここにあります。これは、各ルートのハンドル オブジェクトにブレッドクラムをアタッチし、useMatches フックを使用してそれを取得することに基づいています。

そこでコードを書き直しましたが、修正できない大きな欠陥がありました。ルートが 3 つあり、2 と 3 が 1 の下にネストされているとします。 リーリー

カスタム ライブラリを使用すると、/users/:id に移動して各ルートのブレッドクラムを取得でき、ブレッドクラム ナビゲーション全体が次のようになります。

「ホーム -> ユーザー -> John Doe」

ただし、新しい組み込みメソッドと useMatches() フックを使用すると、ルート 1 と 3 のみを照合できます。ルート 2 (/users) は一致とみなされず、そのルートのパンくずリストにアクセスできません。結果は次のようになります。これは私が望むものではありません:

「ホーム -> ジョン・ドゥ」

それでは私の質問は次のとおりです。この状況にどう対処すべきですか?最初に考えたのは、パンくずリストが正しく表示されるように、ルート 3 を 2 の下にネストすることでした。しかし、実際には、ルート 2 (ユーザー リスト) で定義されたコンポーネントとしてレンダリングされるのに対し、ルート 1 (レイアウト) と 3 だけをレンダリングしたいと考えました (ユーザー詳細ページ)。

useMatches() が部分一致を返す設定を受け入れることを期待していましたが、このフックは入力を受け入れないようです。

フォールバックしてサードパーティのライブラリに戻ろうとしていますが、useMatches とハンドル オブジェクトに基づいたネイティブ ソリューションの使用を明確に推奨しているため、その前にここで質問したいと思いました。これが公式に推奨されている反応ルーターのブレッドクラムの処理方法である場合、解決策があるはずだと思います。

Answer 1

私が理解しているところによると、これは "/users" と "/users/:id" が兄弟ルートであるためです。ルーティング構成を再構築して、"/users/:id" が "/users" のサブルートとなり、" からの「論理パス」が存在するようにします。 / " から "users" から ":id" までの各セグメント。

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