reactjs - react-router:如何在onEnter处理程序中获取先前的路由？

我正在尝试找到一种方法，当用户在onEnter处理程序中点击新的路径/路径时，便可以读取该路径/路径。

我有一个像这样的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?
  }

我似乎找不到一种方法来读取用户所在的上一条路线...我需要在新路线和上一条路线之间进行比较。非常感谢您提供有关如何解决此问题的任何意见。 :)

干杯!

最佳答案

当用户通过地址栏或使用诸如this.context.router.push()之类的react-router导航到新路径时，是否要尝试获取先前的路径？

如果导航使用的是react-router，也许这些简单的方法可以满足您的需求：

1.使用prevPath通过query-params

导航可能如下所示：

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

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


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


2.使用状态传递prevPath

导航可能如下所示：

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

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


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


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