时间戳

首页 > 解决方案 > 反应路由器，奇怪的行为，双路径

reactjs - 反应路由器，奇怪的行为，双路径

问题描述

我发现 react-router 的一个奇怪行为，它复制了地址行中添加的路径。 我的沙盒

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

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

first click: /courses/course/1

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

third: /courses/course/1

问题出在哪里？提前致谢

标签： reactjsreact-router-dom

解决方案

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

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

这是一个工作分叉的沙箱，其中包括解决此问题的几种不同方法。

另一种方法是使用Link或NavLink而不是<article>withonClick和have push()to history。您仍然可以title像当前使用Linkor一样传递 state 属性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>
)

这将使元素成为实际<a>的模式也将打开使用NavLink之类的东西的大门，它可以在必要时公开“活动”样式类进行样式设置。

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

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

希望这会有所帮助！

推荐阅读