react-router setRouteLeaveHook 仍在更新 URL答案

【问题标题】：react-router setRouteLeaveHook still updating URLreact-router setRouteLeaveHook 仍在更新 URL
【发布时间】：2017-02-14 14:43:31
【问题描述】：

我正在使用 react 15.3.1、react-router 2.4.1 和 react-router-redux 4.0.5：

当我捕获路由更改时：

this.props.router.setRouteLeaveHook(
    this.props.route,
    this.routerWillLeave
);

private routerWillLeave = () => {
    if (this.state.editing)
        return 'You may have unsaved changes. Are you sure you want to leave?'
};

...我确实调用了我的this.routerWillLeave 方法，但浏览器中的URL 仍然发生变化，因此即使用户决定不离开页面而留在页面上，URL 现在也是错误的。想法？

【问题讨论】：

有同样的问题，你有没有办法避免这个网址改变

标签： javascript reactjs react-router react-router-redux

【解决方案1】：

export default class extends Component {
  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

  state = {
    editing: true
  }

  componentDidMount() {

    this.context.router.setRouteLeaveHook(this.props.route, () => {
       if (this.state.editing) {
          return false;
          // At here you can give a confirm dialog, return true when confirm true
       }else {
           return true;
       }
    })
  }
}

【讨论】：

【解决方案2】：

如果你的 react-route >2.4，你也可以使用 withRouter 来包装你的组件，这样可能会更好！

import React, {Component} from 'react';
import {render} from 'react-dom';
import {withRouter} from 'react-router';

export default withRouter(class extends Component {
  state = {
    unsaved: true
  }
  componentDidMount() {
    this.props.router.setRouteLeaveHook(this.props.route, () => {
      if (this.state.unsaved) {
        return false;
          // At here you can give a confirm dialog, return true when confirm true
       }else {
          return true;
       }
    })
  }
  render() {
    return (
      <div>
        <h2>About</h2>
        {this.props.children || "This is outbox default!"}
      </div>
    )
  }
})

【讨论】：