為什么在React Router 4.3中嵌套子路由不生效，以及如何解決這個問題？

React router 4.3嵌套路由配置詳解及問題排查

在使用React Router 4.3構建應用時，嵌套路由的正確配置至關重要。本文將分析一個常見的嵌套路由失效問題，并提供有效的解決方案。

假設您希望在/course/coursedetails路徑下嵌套一個子路由/course/coursedetails/coursecatalog，但訪問子路由時卻出現404錯誤。這通常是因為父路由配置了exact屬性導致的。

讓我們分析一個典型的錯誤配置：

錯誤配置示例：

假設app.JS中父路由的配置如下：

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

而CourseDetails.js組件內部的子路由配置如下：

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

由于app.js中父路由使用了exact屬性，React Router會精確匹配/course/coursedetails路徑。當訪問/course/coursedetails/coursecatalog時，由于不完全匹配父路由，React Router不會繼續向下匹配子路由，從而導致404錯誤。

解決方案：

解決方法很簡單，只需移除父路由中的exact屬性即可：

正確配置示例：

修改app.js中的父路由配置：

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

CourseDetails.js中的子路由配置保持不變：

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

通過移除exact屬性，React Router會先匹配到父路由/course/coursedetails，然后繼續匹配其子路由/course/coursedetails/coursecatalog，從而正確渲染子路由組件。

希望以上分析和解決方案能夠幫助您解決React Router 4.3嵌套路由失效的問題。 請確保路徑大小寫一致，并檢查組件名稱與路由配置是否匹配。