react中实现路由切换时离开页面确认弹窗提示

弹窗前确认

一、需要离开提示页面上添加
a.引入Prompt

import { Prompt } from 'react-router-dom';

b.在页面中添加组件，可在render内任一地方添加
<Prompt message='商家信息还未保存，是否离开？' when={true} />

render(){
    return <Prompt message='商家信息还未保存，是否离开？' when={true} />
}

二、在路由页面进行配置
a.Router上添加 getUserConfirmation={getConfirmation}

<Router getUserConfirmation={getConfirmation} >

b.在路由页面添加方法

function getConfirmation(message, callback) { // 至关重要的callback方法，可以异步执行
    if (!window.pageChangeConfirm) { // G.pageChangeConfirm为页面内的全局变量，用于数据交互与条件判断
        callback(true);
        return;
    }
    Modal.confirm({
        title: '离开该页面，表单信息将不被保留？是否确定离开该页面？',
        content: '',
        okText: '离开',
        cancelText: '取消',
        onOk() {
            callback(true);
        },
        onCancel() {
            callback(false);
        },
    });
}

三、触发弹窗
通过设置window.pageChangeConfirm，触发是否弹窗。
例：在componentDidMount设置默认离开是否弹窗。 也可在点击页面时触发修改弹窗参数

 if (isEdit) {
     window.pageChangeConfirm = true;
 }

​