【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.push(next) 到之前触发 block 时获取到的下一个路由（next），伪代码：

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

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

const Leave = () => <Button onClick={() => {
  unblock?.();
  if (next) {
    history.push(next);
  }
}}><Button>

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

基本实现方案就是这样，Bingo！