React Router v4.2.2嵌套路由问题：跳转丢失course_id参数

你遇到的核心问题是静态的Link路径没有携带当前路由中的course_id参数，导致跳转后URL丢失了这个关键值。下面一步步帮你搞定：

1. 修正路由配置 #

首先你的第二个路由路径缺少了node_id参数，和你期望的URL结构不匹配，先更新路由配置：

return (
  <Router>
    <div id="app-main">
      <Header />
      {/* 初始路由：保留可选的course_id参数 */}
      <Route path="/course/:course_id?" component={Content}/>
      {/* 更新为带node_id参数的路径，匹配你期望的URL结构 */}
      <Route path="/course/:course_id?/nodes/:node_id" component={Content}/>
      <Footer />
    </div>
  </Router>
);

2. 动态构造Link的跳转路径 #

你当前用了静态字符串"nodes"作为Link的跳转目标，这不会自动带上当前路由的course_id参数。我们需要从当前路由中获取course_id，然后动态拼接完整路径：

步骤2.1：确保组件能拿到路由参数 #

如果渲染Link的组件是Content的子组件（没有直接被<Route>渲染），需要用withRouter高阶组件包裹它，这样才能获取到路由的match对象：

import { withRouter } from 'react-router-dom';

class YourChapterComponent extends React.Component {
  // 你的组件逻辑
}

// 用withRouter包裹，注入路由相关的props
export default withRouter(YourChapterComponent);

步骤2.2：动态生成跳转路径 #

在组件中获取course_id，然后拼接成符合要求的URL：

render() {
  // 从路由参数中提取当前的course_id
  const { course_id } = this.props.match.params;
  
  return(
    <div className="paragraph-text-child" onClick={() => this.props.select(chapter)} key={chapter.node_id} >
      {/* 根据是否存在course_id，动态生成对应路径 */}
      <Link to={course_id ? `/course/${course_id}/nodes/${chapter.node_id}` : `/course/nodes/${chapter.node_id}`}>
        {chapter.text}
      </Link>
      {this.iterate(chapter.nodes)}
    </div>
  );
}

这样处理后，当你在/course/123页面点击Link，会跳转到/course/123/nodes/456；如果是在/course（无course_id）页面点击，会跳转到/course/nodes/456，完全符合你的需求。

为什么原来的写法不行？ #

react-router的相对路径是基于当前路由的完整路径，但静态的"nodes"只会在当前路径后直接追加。如果当前路由的course_id是可选参数且未传入时，当前路径是/course，追加后就是/course/nodes；即使有course_id，静态路径也不会帮你自动携带参数到新路径，必须手动拼接才能保留参数。

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