Question

我正在尝试检测因点击<Link>而导致的路由更改，以便在路由更改时我可以更改组件的状态。我见过很多地方建议您可以使用router.addTransitionHook，但我有几个问题。

我找不到addTransitionHook的任何真实文档，听起来像是might have been replaced。
我无法弄清楚如何访问路由器。据说它在构造函数中的context.router下可用。我已经尝试了所有建议的here（即Component.contextTypes = { router: React.PropTypes.func.isRequired }），除undefined之外，我的context.router没有得到任何内容。创建路由器时是否需要执行某些操作才能使组件有权访问context？

有一些提议的解决方案涉及mixins。 Lifecycle Mixin提供对routerWillLeave的访问权限。这看起来像我想要的，但是ES6类中没有mixins。

当我按照here所述创建路由器时，我可能会尝试定义onEnter，但我不需要在路由器声明中添加任何代码。这似乎不是一个好的解决方案。

tldr; 在ES6课程中检测React路由更改的最佳方法是什么？

Answer 1

React Router V4不支持

history.listenBefore。而是使用history.block来阻止过渡。 history.listen((location, action) => { // do something })用于监听路由转换。在history

处查看文档

Answer 2

如果我理解正确，您希望使用History模块中的listenBefore功能。

所以你可以使用它：

history.listenBefore((location) => {
  // ...
});

或者如果您需要异步转换，那么：

history.listenBefore((location, callback) => {
  // ...
});

在Confirming Navigation文档中查看更多内容。

Answer 3

我从来没有弄清楚如何使用事件来解决我的问题，但我意识到我应该做的是使用生命周期方法。我的路线是<Route name="routename" component={RouteApp} path="/routename/:urlKey" />。我真正关心的是urlKey param改变了，当发生这种情况时，组件的道具会发生变化。因此，我能够将代码放在componentWillReceiveProps生命周期方法中。

检测ES6类中的反应路由器转换

3 个答案: