React-router v6 のブレッドクラム ナビゲーションと部分一致ルーティング
私は、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 とハンドル オブジェクトに基づいたネイティブ ソリューションの使用を明確に推奨しているため、その前にここで質問したいと思いました。これが公式に推奨されている反応ルーターのブレッドクラムの処理方法である場合、解決策があるはずだと思います。
