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

反応ルーター4.3ネストされたルーティング構成と問題調査の詳細な説明

Reactルーター4.3を使用してアプリケーションを構築する場合、ネストされたルーティングの正しい構成が重要です。この記事では、一般的なネストされたルーティング障害の問題を分析し、効果的なソリューションを提供します。

/course/coursedetailsパス/course/coursedetails/coursecatalogをネストしたいとしますが、サブルーチンにアクセスするときに404エラーが発生します。これは通常、 exact属性を構成する親ルートが原因です。

典型的な誤解を分析しましょう。

エラー構成の例：

app.jsの親ルートの構成が次のとおりであると仮定します。

 // app.js
<route exact path="/course/coursedetails" component="{CourseDetails}"></route>

CourseDetails.jsコンポーネント内のサブルーチン構成は次のとおりです。

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

app.jsの親ルートはexact属性を使用するため、Reactルーターは/course/coursedetailsパスを正確に一致させます。アクセス/course/coursedetails/coursecatalogにアクセスする場合、Reactルーターは親ルートの不完全なマッチングのためにサブルーチンを下方に一致させ続け、404エラーになります。

解決：

ソリューションはシンプルで、親ルートのexact属性を削除するだけです。

正しい構成の例：

app.jsで親ルートの構成を変更します：

 // app.js
<route path="/course/coursedetails" component="{CourseDetails}"></route>

CourseDetails.jsのサブルーチン構成は変更されていません：

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

exact属性を削除することにより、React Routerは最初に親ルート/course/coursedetailsと一致し、次に子ルート/course/coursedetails/coursecatalogと一致し続け、サブルーティングコンポーネントを正しくレンダリングします。

上記の分析とソリューションが、Reactルーター4.3のネストされたルーティング障害の問題を解決するのに役立つことを願っています。パスが一貫していることを確認し、コンポーネント名がルーティング構成と一致するかどうかを確認してください。

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