react-router：如何在 onEnter 处理程序中获取上一条路线？

Question

我正在尝试找到一种方法，当用户在 onEnter 处理程序中点击一个新的 route/path 时，它会读取之前的 route/path。

我的 React Router 结构如下：

    <Router history={history}>
      <div className="index">
        <Route
          path="/"
          component={ComposedAppComponent}
          onEnter={this.onEnterHandler.bind(this)}
        >
          <Route name="streamKey" path=":streamKey">
            <Route name="articleUri" path="(**)" />
          </Route>
        </Route>
      </div>
    </Router>

函数 onEnterHandler 看起来像这样：

  onEnterHandler(nextRouteState) {
    const { streamKey, splat } = nextRouteState.params;

    const nextPath = `/${streamKey}/${splat}`;
    const prevPath = // HOW DO I GET THE PREVIOUS PATH?
  }

我似乎无法找到一种方法来读取用户之前的路线路径...我需要对新路线和之前的路线进行比较。非常感谢任何有关如何处理此问题的意见。 :)

干杯！

Answer 1

当用户通过地址栏或使用像 this.context.router.push() 这样的 react-router 导航到新路径时，您是否试图获取以前的路径？

如果导航使用 react-router，也许这些简单的方法就能得到您要找的东西：

1.使用 query-params

传递 prevPath

导航可能如下所示：

`<Link to="/next" query={{ prevPath: this.props.location.pathname }}> Your Next path</Link>`

现在，您可以使用以下方法在 onEnterHandler 方法上获取 prevPath 值： nextState.location.query.prevPath

缺点：查询将出现在地址栏上。
优点：当用户通过地址栏（直接路径访问）导航时，您仍然可以获得 prevPath。

2。使用 state

传递 prevPath

导航可能如下所示：

`<Link to="/next" state={{ prevPath: this.props.location.pathname }}> Your Next path</Link>`

现在，您可以使用以下方法在 onEnterHandler 方法上获取 prevPath 值： nextState.location.state.prevPath

缺点：查询不会出现在地址栏上。
优点：当用户通过地址栏（直接路径访问）导航时，您无法获得 prevPath。

此外，这些方法的缺点是您应该为每个 Link 组件分配一个 prevPath 值。为 Link 组件创建一个包装器组件可以解决这个问题。

react-router：如何在 onEnter 处理程序中获取上一条路线？

react-router: how to get the previous route in onEnter handler?

reactjs

react-router

react-router-redux