利用Prompt，阻止react路由切换，弹窗确认，并且自定义弹窗样式

在做项目的时候，有个需求，当表单页面未保存，切到其他页面时需要用户确认跳转。

按常理来说，跳转是由react-router-dom控制的，所以它也应该有阻止跳转的机制，查了api，发现Prompt这个组件可以做到这个事。将Prompt放在需要弹窗的页面里，哪里都行，就可以有这个功能。

      <Prompt message={() => isSave ? true : '有修改尚未保存，确定要离开页面吗？’} />

Prompt接受两个属性，message可以是字符串或方法，方法返回true就顺利跳转，返回字符串就弹窗阻止跳转。还有个属性when,是boolean值，true就是弹窗，false为顺利跳转。

但现在的弹窗是浏览器的默认弹窗，很丑。所以我们需要自定义一下。

在react-router-dom的BrowserRouter和HashRouter上有属性getUserConfirmation可以阻止默认弹窗。

    <BrowserRouter getUserConfirmation={getConfirmation} >
        <App />
    </BrowserRouter>

这个属性是一个方法，参数为Prompt的message和弹窗取消和确认的回调。这里我直接用的antd的modal组件作为弹窗。

  const getConfirmation = (message: any, callback: any) => {
    Modal.confirm({
      title: message,
      onCancel: () => {
        callback(false);
      },
      onOk: () => {
        callback(true);
      }
    });
  };

最后，在过程中踩了一个坑。就是不能用router组件。如果你像这样

    <BrowserRouter getUserConfirmation={getConfirmation} >
      <Router history={history}>
        <App />
      </Router>
    </BrowserRouter>

那么getUserConfirmation是不会起作用的。