React实现离开页面弹窗提示

效果演示

页面tab切换

页面路由离开

实现思路

由于我的项目是使用 react umi ant design 搭建的项目, 所以我的想法就是使用 umi 的 history 搭配 useEfftct 进行路由监听并且使用antd 的 model 弹窗,从而实现这个效果, 具体代码如下

代码语言：javascript复制

 // 监听页面离开
  useEffect(() => {
    const unblock = history.block(({ location }) => {
      modal.confirm({
        title: '提示',
        content: '请确保您所编辑的内容已经发布,否则离开后不会进行保存？',
        onOk: () => {
          unblock() // 一定要这样子执行
          history.push(location.pathname)
        },
        onCancel: () => {}
      })
    })
    return () => {
      unblock()
    }
  }, [])

注意点 :

1. useEfftct 只需要书写, 因为需要在组件进入的时候就进行监听 , 但是不要在 useEfftct 进行路由的的监听,否则会一直触发

2. history 是 umi 的导出, 所以需要在自行导入

3. 在执行 onOk 的时候, 一定需要执行 unblock() 再进行跳转, 否则会出现错误

4. 在页面卸载之后也一定要在 useEffect 中进行卸载路由监听