Question

当用户在onEnter处理程序中点击新路径/路径时，我试图找到一种方法来读取上一个路径/路径。

我有一个像这样结构的React路由器：

    <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。使用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组件创建一个包装器组件可以解决这个问题。

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

1 个答案: