【React + Umi】自定义离开页面拦截弹框事件

在 react + umi 中对离开页面的行为进行自定义弹窗拦截控制。以下为可选的方案分析。

wrapper

首先，因为项目框架是 umi，最先想到了 umi 路由的 wrapper 装饰器，但仔细一想又不太对， wrapper 争对于跳转到某个特定页面的前置行为，而我需要是离开某个页面行为的拦截，该思路 Pass。

beforeunload

其次，想到的是原生的 windows 事件：beforeunload

useEffect(()=> {  
  window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {  
    event.preventDefault();  
    event.returnValue = "";  
  })  
}, [])

不过这样做，只能拦截到刷新行为，同时还是浏览器默认的那个巨丑的弹框，Pass。

history.block

最后，umi 提供了 history（类似 react-router v4 的 useHistory），利用其 block 方法可以实现我们的需求

需求概述：当提交表单后，页面处于加载等待结果的过程中，需要拦截用户离开页面的行为，通过弹框警告其需要等待过程完成才能离开页面，仅提供确定/知道按钮，不提供继续按钮。

思路：通过 history.block 监听用户离开的事件，当页面处于 loading 状态，阻塞页面，并显示自定义弹框，弹框中有一个确定按钮，点击效果仅为关闭这个弹窗；当页面不处于 loading，先阻塞页面，并保存 history.block() 的返回值用于后续的放行路由（history.block的返回值是一个函数，执行效果为取消路由阻塞），并保存原本想要去的路由（用于后续跳转），然后解锁路由，手动 history.push() 到刚才获取到的下一个路由，伪代码：

import { Button, Modal } from 'antd';
import { history } from '@umijs/max';

const history = useHistory();  
const [loading, setLoading] = useState(false);  // 某容器加载
const [blockOpen, setBlockOpen] = useState(false);
const [unblock, setUnblock] = useState<Function>();  
  
useEffect(()=> {  
  if (loading) {  
    history.block(({location})=> {
      setBlockOpen(true);  
      return false;  
    })  
  } else {
    let next = '';
	setUnblock(history.block(({location})=> {  
      next = location.pathname;
      return false;  
    }))  
    unblock?.();
    history.push(next);
  }  
}, [loading, unblock])


export default function Reconc() {
  return(
    <>
      /** 上面应当有一个容器绑定loading，通过某些控件控制器其加载状态 */
      <Modal open={blockOpen} footer={
        <Button type="primary" onClick={() => setBlockOpen(false)}><Button>
      }>
	    <span>操作尚未完成，请等待操作结束再离开页面！<span>
      </Modal>
    </>
  )
}

基本实现方案就是这样，Bingo！文章来源地址https://uudwc.com/A/b13pb