Question

我发现了react-router的怪异行为，它重复了地址行中添加的路径。 my sandbox

当URL正确更改后，单击课程时，单击任何其他（或相同）课程时，添加的路径都会加倍，因此，在第三次单击时，它会还原为正常路径。

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

first click: /courses/course/1

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

third: /courses/course/1

问题出在哪里？预先感谢

Answer 1

您可以通过将push()中的Courses.js更改为相对于根的路径以匹配您的Route定义来解决此问题。请注意开头的前向Flash /和${path}的移除：

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

这是一个工作正常的Sandbox，其中包含解决此问题的几种不同方法。

另一种方法是使用Link或NavLink代替<article>的{{1}}和onClick到push()。您仍然可以像使用history或title一样传递状态属性Link。这正是NavLink和Link的意图：

Navlink

这将使元素成为实际的{this.state.courses.map(course => <Link key={course.id} to={{ pathname: `/courses/course/${course.id}`, state: { title: course.title } }} > {course.title} </Link> )模式，也将为使用NavLink之类的东西打开大门，这种东西可以在必要时公开“活动的”样式类以进行样式设置。

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

Link

希望有帮助！

反应路由器，怪异行为，路径加倍

1 个答案: