react-router 4.3，嵌套子路由为什么不生效？

Question

react-router 4.3，嵌套子路由为什么不生效？

我就是在/course/courseDetails页面加了菜单，想点击切换这几个tab内容，访问/course/courseDetails到这个详情页面没问题，切菜单去/course/courseDetails/courseCatalog就404找不到了，这是为啥，感觉写的没问题啊。父子路由把exact都去了父组件切换路由都没反应了...。

app.js

courseDetails.js

前端 javascript

html5 react

阅读 1.2k

AI BotBETA

在 React Router 4.x 中遇到嵌套路由导致 404 错误通常是因为路由配置不正确或服务器设置没有正确处理前端路由。这里有几个可能的原因和解决方案：

1. 确保嵌套路由正确配置

首先，确保你的嵌套路由是在父路由组件中正确配置的。在你的例子中，/course/courseDetails 应该是父路由，而 /course/courseDetails/courseCatalog 是其子路由。确保你的路由定义类似于以下结构：

<Router>
  <Switch>
    <Route path="/course/courseDetails" component={CourseDetails}>
      <Route path="courseCatalog" component={CourseCatalog} />
      {/* 可能还有其他子路由 */}
    </Route>
    {/* 其他路由 */}
  </Switch>
</Router>

注意：在 React Router v4 及以上版本中，<Route> 组件不应该直接嵌套在另一个 <Route> 的 component 属性中。通常，你会在 CourseDetails 组件内部使用 <Route> 组件来定义子路由。正确的方式是使用 Route 的 render 属性或 children 属性（配合 Switch），如下所示：

<Router>
  <Switch>
    <Route path="/course/courseDetails" render={props => (
      <CourseDetails {...props}>
        <Route path={`${props.match.path}/courseCatalog`} component={CourseCatalog} />
        {/* 其他子路由 */}
      </CourseDetails>
    )} />
    {/* 其他路由 */}
  </Switch>
</Router>

或者，在 CourseDetails 组件内部使用 <Switch> 和 <Route>：

// CourseDetails.js
class CourseDetails extends React.Component {
  render() {
    return (
      <div>
        <h1>Course Details</h1>
        <Switch>
          <Route path={`${this.props.match.path}/courseCatalog`} component={CourseCatalog} />
          {/* 其他子路由 */}
        </Switch>
      </div>
    );
  }
}

2. 服务器配置

确保你的服务器（如 Nginx, Apache, Express.js 等）配置为对所有前端路由返回相同的 index.html 文件。这是因为当浏览器尝试直接访问 /course/courseDetails/courseCatalog 时，服务器可能会尝试找到该路径下的实际文件或目录，而不是让 React Router 接管路由。

对于 Express.js，你可以使用类似以下的中间件来处理这个问题：

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

确保这个中间件是最后一个注册的路由处理函数，以便它能够捕获所有未匹配到其他路由的请求。

3. 检查浏览器控制台和网络请求

查看浏览器控制台和网络请求，看是否有任何 JavaScript 错误或 404 响应。这可以帮助你进一步诊断问题。

4. 确保 React Router 版本和文档匹配

确保你查看的 React Router 文档与你的项目中安装的版本相匹配。不同版本的 React Router 在 API 和用法上可能有所不同。

按照上述步骤检查和调整你的配置，应该可以解决你遇到的 404 错误问题。

1 个回答

发布于
10 月 22 日北京

有嵌套路由的页面，Route上不能设置exact，不然就匹配不到子路由。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

react-router 4.3，嵌套子路由为什么不生效？

1. 确保嵌套路由正确配置

2. 服务器配置

3. 检查浏览器控制台和网络请求

4. 确保 React Router 版本和文档匹配

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？