反应路由器,怪异的行为,双重路径

您可以通过更改 push() 在内部 Courses.js Route 定义。注意前闪 / 开始和移除 ${path} :

this.props.history.push(`/courses/course/${course.id}`, {
  title: course.title
});

Sandbox

另一种方法是 Link NavLink 而不是 <article> 具有 onClick 不得不这么做 推送() 到 history title Link 或 NavLink . 这到底是什么 链接 Navlink

{this.state.courses.map(course =>
  <Link
    key={course.id}
    to={{
      pathname: `/courses/course/${course.id}`,
      state: { title: course.title }
    }}
  >
    {course.title}
  </Link>
)

<a> 导航链接

您也可以考虑简化 和 链接

<Route path="/courses/:id" exact component={Courses} />

// ...

<Link
  className="Course"
  key={course.id}
  to={{
    pathname: `/courses/${course.id}`,
    state: { title: course.title }
  }}
>
    {course.title}
</Link>

希望这有帮助!