4

当用户在处理程序中点击新路径/路径时，我试图找到一种方法来读取先前的路径/路径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?
  }

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

干杯!

4

1 回答 1

11

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

如果导航正在使用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：当用户通过地址栏导航（直接路径访问）时，您无法获取您的信息。

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

于 2016-04-16T11:08:33.790 回答