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

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

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

我认为自 Lazarev 的回答以来推荐的方法已经改变，因为他的链接示例当前不再在examples文件夹中。相反，我认为你应该通过定义来遵循这个例子：

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

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

更新

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

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

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 V5，我们的站点需要显示自定义提示消息，这篇中等文章帮助我了解这是如何实现的

TLDR：<Prompt/>来自 react-router-dom的组件可以接受一个函数作为消息props，如果该函数返回，true您将继续导航，如果false导航将被阻止