React Router - onEnter 钩子中的中止转换答案

【问题标题】：React Router - abort transition in onEnter hookReact Router - onEnter 钩子中的中止转换
【发布时间】：2016-12-01 15:15:00
【问题描述】：

我正在使用最新版本的 react 路由器 (^3.0.0)。

我正在尝试使用 onEnter 钩子在我的一个组件中中止转换：

var AuthorPage = React.createClass({
  statics: {
    onEnter: function(nextState, replace, callback) {
        replace('/');;
        //hashHistory.replace('/');
    }},...

当我使用 onEnter 钩子的 replace 方法时，它工作正常（组件确实变回了我的主应用程序组件），但 URL 保持不变： http://localhost:9005/#/authors 而不是 http://localhost:9005/#。

另一方面，当我使用 hashHistory.replace 方法时，组件和 URL 都会正确更改（使用 react-router 的 hashHistory）。

我想澄清两点：

如果 replace 方法不更改我的 URL，而它确实将组件更改回我想要的内容，我为什么要使用它？
hashHistory.replace 方法是否被认为是执行中止转换到特定页面的合适方法？

谢谢

【问题讨论】：

标签： reactjs react-router browserify

【解决方案1】：

您应该使用replace。使用hashHistory 不会正确中断转换。

您需要做更多的挖掘来确定它为什么不更新 URL。它应该是。如果你能找到这个功能：

https://github.com/mjackson/history/blob/v2.x/modules/createHashHistory.js#L93-L123

在您的node_modules/history/createHashHistory.js（它将在 ES5 中）中，您可以尝试记录您在其中收到的位置。

如果没有调用，您可以尝试在historyListener 中检查match 回调的redirectLocation 值。

https://github.com/ReactTraining/react-router/blob/6eeb7ad358f987520f5b519e48bdd31f725cbade/modules/createTransitionManager.js#L212-L233

【讨论】：