• 在营业场景中，某些页面（页面天生的数据脱离页面未保留）时须要提醒操纵者是不是确认脱离当前页面，假如用体系的提醒的信息不免有点太丑，显得和页面款式扞格难入。*
  下面是我用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>
    );
  }
}

好了~ 这个结果就完成了。