React嵌套Route失效求助：点击课程跳转后页面空白

嘿，我看到你遇到了嵌套路由失效的问题，点击课程跳转后页面空白，这其实是React Router的路由匹配逻辑导致的，咱们一步步来解决它：

问题根源 #

当你点击课程跳转到localhost.com/course/1?title=blabla时，App.js里的<Switch>会按顺序查找第一个匹配的路由规则。你现在的Switch里只有/courses和/users两个路由，都和/course/1不匹配，所以Switch不会渲染任何组件，页面自然就空白了。而你把/course/:id的路由放在了Courses组件内部，但此时Courses组件根本没被Switch选中渲染，这个嵌套路由自然也不会生效。

解决方案 #

根据你的需求，我提供两种常用的解决方式：

方式1：直接在App的Switch中添加独立路由 #

如果你希望点击课程后直接跳转到单独的课程详情页（不需要保留Courses页面的列表），可以直接在App的Switch里添加/course/:id的路由：

修改App.js中的Switch部分：

<Switch>
  <Route path='/courses' component={Courses} />
  <Route path='/course/:id' component={Course} /> {/* 新增这一行 */}
  <Route path='/users' component={Users}/>
</Switch>

这样当访问/course/1时，Switch会直接匹配到这个路由，渲染Course组件，页面就能正常显示内容了。

方式2：使用嵌套路由（保留Courses父组件内容） #

如果你希望点击课程后，仍然显示Courses页面的顶部标题和课程列表，同时在下方展示课程详情，就需要正确配置嵌套路由：

1. 首先调整App.js的路由（确保父路由/courses能匹配子路径，不要加exact属性）：

<Switch>
  <Route path='/courses' component={Courses} />
  <Route path='/users' component={Users}/>
</Switch>

2. 修改Courses.js中的跳转路径，把/course/改成/courses/（让子路径属于父路由的路径下）：

CourseHandler=(id,title)=>{
  this.props.history.push({
    pathname: '/courses/'+id,
    search:'?title='+title
  })
}

3. 最后修改Courses里的嵌套路由，你可以用绝对路径或者相对路径：

// 绝对路径写法
<Route path='/courses/:id' component={Course}/>

// 或者相对路径写法（React Router 5+支持）
<Route path='/:id' component={Course}/>

这样当访问/courses/1时，App的Switch会匹配/courses渲染Courses组件，然后Courses内部的嵌套路由会匹配/courses/1渲染Course组件，页面就会同时显示父组件和子组件的内容了。

额外提示 #

如果你的项目用的是React Router v6，语法会有一些变化（比如用<Routes>替代<Switch>，用element属性传递组件），但核心的路由匹配逻辑是一致的，你可以根据版本调整写法。

内容的提问来源于stack exchange，提问作者Flupper