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。

正确的配置方法：

1. 调整路由路径： 父路由和子路由的路径需要相对正确。父路由路径应该更通用，子路由路径应该相对于父路由。

   

   Model Switcher

   根据任务复杂度自动切换不同的AI模型。支持OpenClaw设置中的所有可用模型。当检测到复杂...

   下载

2. 避免在父路由中使用 exact 属性： exact 属性会强制精确匹配路径，阻止子路由匹配。

3. 使用 Route 而不是 Switch (如果不需要精确匹配): 如果不需要精确匹配第一个路由，可以直接使用 <route></route> 组件，而无需使用 <switch></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>

通过以上调整，确保父路由能够正确地渲染并包含子路由，从而解决嵌套路由失效的问题。 记住，路径的定义至关重要，确保它们能够正确地嵌套和匹配。 如果仍然遇到问题，请检查您的路由配置是否与组件的路径相匹配。