React 路由器，奇怪的行为，双重路径

Question

我发现 react-router 有一个奇怪的行为，它会复制地址行中添加的路径。 my sandbox

一旦 url 正确更改，当我们单击一个课程时，当我们单击任何其他（或相同）课程时，添加的路径加倍，因此在第三次单击时它会反转回正常路径。

示例：地址行中的路径变为：

first click: /courses/course/1

second: /courses/course/:id/course/1

third: /courses/course/1

问题出在哪里？提前致谢

Answer 1

您可以通过将 Courses.js 中的 push() 更改为相对于根的路径以匹配您的 Route 定义来解决此问题。注意开头的正闪/和去掉${path}:

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

这是一个工作分支 Sandbox，其中包含针对此问题的几种不同方法。

另一种方法是使用 Link or NavLink 而不是 <article> 和 onClick，并且必须 push() 到 history。您仍然可以像当前使用 Link 或 NavLink 一样传递状态属性 title。这正是 Link 和 Navlink 的用途：

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

这将使元素成为一个实际的 <a> 该模式也将打开使用类似 NavLink 的东西的大门，它可以公开 "active" 样式 class 样式如果必要的。

您还可以考虑简化 Route 和 Link 以匹配更多标准约定：

<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>

希望对您有所帮助！

React 路由器，奇怪的行为，双重路径

React router, weird behaviour, doubled path

reactjs

react-router-dom