我试图找到一种方法,当用户点击新路径时,在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?
}
我似乎无法找到一种方法来读取用户之前所在的路线路径...我需要在新路线和之前的路线之间进行比较。非常感谢任何有关如何解决此问题的意见。 :)
Cheers!
当用户通过地址栏导航到新路径或使用像这样的react-router时,您是否试图获取以前的路径this.context.router.push()
?
如果导航正在使用react-router
,也许这些简单的方法会得到你正在寻找的东西:
1. Pass prevPath
using query-params
导航可能如下所示:
`<Link to="/next" query={{ prevPath: this.props.location.pathname }}> Your Next path</Link>`
现在,您可以获取 prevPath 值onEnterHandler
方法通过使用这个:nextState.location.query.prevPath
-
Cons:查询将出现在地址栏上。
-
Pros: 你仍然可以得到你的
prevPath
当用户通过地址栏导航(直接路径访问)时。
2. Pass prevPath
使用状态
导航可能如下所示:
`<Link to="/next" state={{ prevPath: this.props.location.pathname }}> Your Next path</Link>`
现在,您可以获取 prevPath 值onEnterHandler
方法通过使用这个:nextState.location.state.prevPath
-
Cons:查询不会出现在地址栏上。
-
Pros: 你无法获得你的
prevPath
当用户通过地址栏导航(直接路径访问)时。
此外,这些方法的缺点是您应该分配一个prevPath
值到每个链接组件中。为 Link 组件创建一个包装组件可以解决这个问题。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)