react-router:如何在 onEnter 处理程序中获取先前的路由? [英] react-router: how to get the previous route in onEnter handler?

问题描述

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

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

 <路由器历史={历史}><div className="索引"><路线路径=/"组件={ComposedAppComponent}onEnter={this.onEnterHandler.bind(this)}><Route name="streamKey" path=":streamKey"><Route name="articleUri" path="(**)"/></路线></路线>

</路由器>

函数，onEnterHandler，看起来像这样:

 onEnterHandler(nextRouteState) {const { streamKey, splat } = nextRouteState.params;const nextPath = `/${streamKey}/${splat}`;const prevPath =//我如何获得上一个路径?}

我似乎无法找到读取用户所在的先前路线路径的方法...我需要在新路线和先前路线之间进行比较.任何关于如何解决这个问题的意见都非常感谢.:)

干杯！

解决方案

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

如果导航使用 react-router，也许这些简单的方法会得到你想要的:

1.使用 query-params

传递 prevPath

导航可能如下所示:

`你的下一个路径`

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

• 缺点:查询将显示在地址栏上.
• 优点:当用户浏览地址栏(直接路径访问)时，您仍然可以获取prevPath.

2.使用状态传递prevPath

导航可能如下所示:

`你的下一个路径`

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

• 缺点:查询不会出现在地址栏上.
• 优点:当用户浏览地址栏(直接路径访问)时，您无法获得 prevPath.

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

I'm trying to find a way to read the previous route/path when a user hits a new one, within the onEnter handler.

I have a React Router structured like so:

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

the function, onEnterHandler, looks like so:

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

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

I can't seem to find a way to read the previous route path the user was on... I need to make a comparison between the new route and previous one. Any input on how to approach this is much appreciated. :)

Cheers!

解决方案

Are you trying to get the previous path when the user navigate to new path through address bar or using react-router like this.context.router.push()?

If the navigation is using react-router, maybe these simple way would get what you're looking for:

1. Pass prevPath using query-params

Navigation might look like this:

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

Now, you can get your prevPath value on onEnterHandler method by using this: nextState.location.query.prevPath

• Cons: the query will appear on address bar.
• Pros: you are still able to get your prevPath when user is navigating through address bar (direct path access).

2. Pass prevPath using state

Navigation might look like this:

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

Now, you can get your prevPath value on onEnterHandler method by using this: nextState.location.state.prevPath

• Cons: the query won't appear on address bar.
• Pros: you are not able to get your prevPath when user is navigating through address bar (direct path access).

In addition, the cons of those method is you should assign a prevPath value into each of Link components. Create a wrapper component for the Link component would solve this issue.

这篇关于react-router:如何在 onEnter 处理程序中获取先前的路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！