React实现离开页面弹窗提示

效果演示

页面tab切换

页面路由离开

实现思路

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

 // 监听页面离开
  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 中进行卸载路由监听

🐤我非常乐意听取您的疑问和想法，欢迎在评论区留言

🐰您的每一条评论对我都至关重要，我会尽快回复

🎈如果这篇文章对您有所启发或帮助，欢迎赞赏、收藏或分享

🎁您的每一个动作都是对我创作的最大鼓励和支持

👍感谢您的阅读和陪伴，希望我的文章能给您带来一些帮助

🍻感谢您的支持，我会继续努力创作更多有价值的内容！

这篇文章的内容就介绍到这里，期待我们下次的相遇。感谢您花时间阅读，如果有任何问题或想法，欢迎在评论区留言。

结尾~