【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></>)
}