ReactJS中如何监听浏览器刷新按钮点击并触发确认弹窗？

嘿，我明白你遇到的问题了——之前的代码要么在页面首次加载就弹框，要么根本没触发想要的效果，这确实挺让人头疼的。我来帮你理清楚正确的实现方式：

为什么之前的方法无效？ #

• 第一个用performance.navigation.type的代码：这个API已经被废弃了，而且你的useEffect是空依赖数组，所以组件一挂载就会执行，判断的是首次加载的导航类型，自然不是你想要的刷新时触发。
• 第二个检查BeforeUnloadEvent的代码：你只是判断了这个事件类型是否存在，并没有实际监听beforeunload事件，所以完全没触发逻辑。

方案1：在用户触发刷新/关闭时弹出确认提示（推荐） #

如果你想在用户点击刷新、关闭标签页或者导航离开时，弹出确认提示阻止误操作，应该监听beforeunload事件。这是浏览器提供的标准事件，专门处理页面即将卸载的场景：

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    const handleBeforeUnload = (e) => {
      // 必须阻止默认行为，才能触发浏览器的确认提示
      e.preventDefault();
      // 部分浏览器需要设置returnValue（即使自定义文本可能不显示）
      e.returnValue = '';
      // 注意：现在主流浏览器（Chrome、Firefox等）已经不允许自定义提示文本了
      // 浏览器会显示自己默认的提示内容，但功能是正常的——用户点击取消就会中止刷新/关闭
    };

    // 添加事件监听
    window.addEventListener('beforeunload', handleBeforeUnload);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  return <div>你的页面内容</div>;
}

方案2：页面刷新完成后判断并弹出提示 #

如果你是想在页面刷新加载完成后，判断这次加载是刷新操作，再弹出提示（比如告知用户页面已刷新），可以用标准的performance.getEntriesByTypeAPI替代废弃的performance.navigation.type：

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    // 获取导航相关的性能条目
    const navigationEntry = performance.getEntriesByType('navigation')[0];
    // 判断是否是刷新加载
    if (navigationEntry?.type === 'reload') {
      window.confirm("This page is reloaded");
    }
    // 如果你不想在首次加载时弹框，就去掉else分支的逻辑
    // else {
    //   window.confirm("This page is not reloaded");
    // }
  }, []);

  return <div>你的页面内容</div>;
}

navigationEntry.type的可选值：

• reload：页面通过刷新按钮或location.reload()加载
• navigate：首次加载或通过链接导航到该页面
• back_forward：通过浏览器前进/后退按钮加载

注意事项 #

1. 对于beforeunload事件，自定义提示文本的能力被多数浏览器限制了，这是为了统一用户体验，所以不要纠结于自定义内容，浏览器的默认提示已经足够清晰。
2. performance.getEntriesByType是现代浏览器都支持的标准API，兼容性没问题，不需要担心废弃的问题。

内容的提问来源于stack exchange，提问作者YaraR