利用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 是不会起作用的。