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

Question

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

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

<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

我们正在使用 React Router V5，我们的网站需要显示自定义提示消息，this medium article 帮助我了解了这是如何实现的

TLDR：来自 react-router-dom 的 <Prompt/> 组件可以接受一个函数作为消息道具，如果该函数返回 true 你将继续导航，如果 false 导航将是被屏蔽了

Answer 2

我认为自拉扎列夫的回答以来推荐的方法已经改变，因为他的链接示例当前不再位于 examples 文件夹中。相反，我认为您应该遵循this example 的定义：

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

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

更新

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

Answer 3

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

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

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

Answer 4

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>
    );
  }
});