react下路由切換 詢問提示

• 在業務場景中，某些頁面（頁面生成的數據離開頁面未保存）時須要提示操做者是否確認離開當前頁面，若是用系統的提示的信息不免有點太醜，顯得和頁面樣式格格不入。*
  下面是我用react版本結合antd的實現 須要的同窗能夠參考下哈

這是實現提示的效果哦~

首先須要依賴這個這個插件 react-router-navigation-prompt
下面是具體的代碼

import React from 'react';
import {
  Modal,
} from 'antd';
import NavigationPrompt from 'react-router-navigation-prompt';

const confirm = Modal.confirm;

class RouterAlert extends React.Component {
// 設置當前路由切換時是否切換 可根據具體業務操做
  state = {
    isWhen: false,
  };


  render() {
    const { isWhen } = this.state;
    return (
      <div>
      /**
        * @param crntLocation 當前路由路徑數據
        * @param nextLocation 要切換的路由路徑數據
        * pathname 表明路徑的值
       * * */
         <NavigationPrompt when={(crntLocation, nextLocation) => {
             if (isWhen && crntLocation.pathname !== nextLocation.pathname) {
            return true;
          }
          return false;
        }
        }
        >
        /**
          * @param onConfirm 肯定離開調用當前函數 
          * @param onCancel 不離開時調用當前函數
         * * */
          {({ onConfirm, onCancel }) => {
            confirm({
             title: '檢測到您還有數據未保存，肯定離開嗎？',
              onOk() {
                onConfirm();
              },
              onCancel() {
                onCancel();
              },
            });
          }}
        </NavigationPrompt>
      </div>
    );
  }
}

好了~ 這個效果就實現了。