利用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是不會起做用的。