Nested SubroutinesがReact Router 4.3で有効にできないのはなぜですか？この問題を解決する方法は？

反応ルーター4.3ネストされたルーターの故障と溶液

Reactルーター4.3を使用してネストされたルートを構築する場合、サブルーチンが適切に機能しない問題に遭遇することがよくあります。この記事では、ケース分析を使用し、効果的なソリューションを提供します。

問題の説明：

ユーザーは/course/coursedetailsページにタブメニューを追加し、メニューをクリックして異なるコンテンツを切り替えることを望んでいます。アクセス/course/coursedetailsは正常ですが、 /course/coursedetails/coursecatalogに切り替えると、404エラーが発生しました。ユーザーは親と子のルートのexact属性を削除しましたが、親コンポーネントはルーティングの変更に応答していません。

コード例：

app.js（ルーティング構成）：

<route component="{Course}" path="/course"></route>

coursedetails.js（サブロウト構成）：

<route component="{CourseDetails}" path="/course/coursedetails"></route>
<route component="{CourseCatalog}" path="/course/coursedetails/coursecatalog"></route>

問題の分析と解決策：

問題の根本原因は、Reactルーター4.3のルーティングマッチングメカニズムにあります。親ルートにexact属性セットがある場合、子ルートパスが一致していても、親ルートが最初に一致し、子ルートが効果的ではありません。 exact属性が削除されたとしても、ルート定義が正しくない場合に問題を引き起こす可能性があります。

解決：

1. 親ルートのexact属性を削除します（存在する場合）：親ルート（ /course ）を確認します<route></route>コンポーネントにはexact属性がありません。これにより、親ルートが長いパスを一致させることができ、子ルートが適切に動作できるようになります。

2. ルート定義の順序を調整します：子ルートの後に子ルートが定義されていることを確認してください。定義された順序でRouter Router一致を対応します。

修正コードの例：

app.js ：（この例にexact属性がないため、変更は必要ありません）

<route component="{Course}" path="/course"></route>

coursedetails.js ：（親ルートの後に子ルートが定義されている場合、変更は必要ありません）

<route component="{CourseDetails}" path="/course/coursedetails"></route>
<route component="{CourseCatalog}" path="/course/coursedetails/coursecatalog"></route>

問題が続く場合は、以下を確認してください。

• パスが正しい：スペルとルートパスのケースを再確認します。
• コンポーネントのインポート： Course 、 CourseDetails 、 CourseCatalogコンポーネントが正しくインポートされていることを確認してください。
• スイッチコンポーネント：使用する場合<switch></switch>コンポーネント、子ルートの後に子ルートが定義されていることを確認してください。<switch></switch>最初の一致したルートのみを一致させます。

上記の調整により、 /course/coursedetails/coursecatalogパスは、404のエラーを避けるために適切に動作するはずです。問題が続く場合は、より詳細な分析のために完全なコードスニペットを提供します。

以上がNested SubroutinesがReact Router 4.3で有効にできないのはなぜですか？この問題を解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。