Question

我的React应用中有一个页面，如果表单很脏，我希望阻止用户离开。

在我的react-routes中，我正在使用onLeave prop这样：

<Route path="dependent" component={DependentDetails} onLeave={checkForm}/>

我的onLeave是：

const checkForm = (nextState, replace, cb) => {
  if (form.IsDirty) {
    console.log('Leaving so soon?');
    // I would like to stay on the same page somehow...
  }
};

有没有办法防止新路线被触发并让用户保持在同一页面上？

Answer 1

我认为自Lazarev的答案以来推荐的方法已经改变，因为他的链接示例目前不再位于examples文件夹中。相反，我认为您应该通过定义：{/ p>来关注this example

componentWillMount() {
  this.props.router.setRouteLeaveHook(
    this.props.route,
    this.routerWillLeave
  )
},

然后将routerWillLeave定义为一个函数，该函数返回将出现在确认警报中的字符串。

<强>更新

之前的链接现已过时且无法使用。在较新版本的React Router中，似乎有一个新组件Prompt可用于取消/控制导航。见this example

Answer 2

现在为时已晚，但根据React Router Documentation，您可以使用preventing transition帮助<prompt>组件。

  <Prompt
      when={isBlocking}
      message={location =>
        `Are you sure you want to go to ${location.pathname}`
      }
    />

如果isBlocking等于true，则会显示一条消息。有关更多信息，请阅读文档。

Answer 3

React-router api为这种情况提供了一个Transition对象，您可以在正在使用的组件的willTransitionTo生命周期方法中创建一个钩子。类似的东西（代码取自github上的react-router examples）：

var Form = React.createClass({

  mixins: [ Router.Navigation ],

  statics: {
    willTransitionFrom: function (transition, element) {
      if (element.refs.userInput.getDOMNode().value !== '') {
        if (!confirm('You have unsaved information, are you sure you want to leave this page?')) {
          transition.abort();
        }
      }
    }
  },

  handleSubmit: function (event) {
    event.preventDefault();
    this.refs.userInput.getDOMNode().value = '';
    this.transitionTo('/');
  },

  render: function () {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <p>Click the dashboard link with text in the input.</p>
          <input type="text" ref="userInput" defaultValue="ohai" />
          <button type="submit">Go</button>
        </form>
      </div>
    );
  }
});

如何使用react-router防止路由更改

3 个答案: