React Router 4.3 嵌套路由失效排查指南
在使用 React Router v4.3 时，嵌套路由有时会失效，本文将分析常见原因及解决方法。
问题场景
假设您有一个 /course/coursedetails 页面，包含一个用于切换不同 Tab 内容的菜单。访问 /course/coursedetails 没有问题，但点击菜单切换到 /course/coursedetails/coursecatalog 时，却出现 404 错误。即使已移除父路由的 exact 属性，问题依然存在。
以下是一个示例代码片段：
app.js (路由配置)
coursedetails.js (嵌套路由)
解决方案
问题根源在于路由匹配的相对路径和 Switch 组件的特性。Switch 组件只匹配第一个符合条件的路由。 如果父路由 /course/coursedetails 匹配成功，Switch 组件便不会再向下匹配子路由 /course/coursedetails/coursecatalog。
正确的配置方法：
-
调整路由路径： 父路由和子路由的路径需要相对正确。父路由路径应该更通用，子路由路径应该相对于父路由。
-
避免在父路由中使用
exact属性：exact属性会强制精确匹配路径，阻止子路由匹配。 -
使用
Route而不是Switch(如果不需要精确匹配): 如果不需要精确匹配第一个路由，可以直接使用
修改后的代码:
app.js (保持不变)
coursedetails.js (修改后的嵌套路由)
或者，如果 CourseDetails 组件需要渲染在 /course/coursedetails 路径下：
( )} />
通过以上调整，确保父路由能够正确地渲染并包含子路由，从而解决嵌套路由失效的问题。 记住，路径的定义至关重要，确保它们能够正确地嵌套和匹配。 如果仍然遇到问题，请检查您的路由配置是否与组件的路径相匹配。
