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