React中beforeunload事件仅在指定路径生效的问题排查

你的问题出在监听的移除时机和路径判断缺失上——当前代码里的useEffect依赖为空数组，虽然返回了移除监听的函数，但如果路由切换时组件卸载逻辑没及时触发，或者路径变化后监听没有被正确清理，就会导致在其他路径下刷新仍弹出对话框。

下面是修正后的代码，确保仅在/compList路径下启用卸载确认弹窗：

首先导入react-router-dom的useLocation钩子：

import { useLocation } from 'react-router-dom';

然后修改组件代码：

export default function CompList() {
  const location = useLocation();

  useEffect(() => {
    // 仅在当前路径为/compList时添加监听
    if (location.pathname === '/compList') {
      window.addEventListener("beforeunload", handleBeforeUnload);
    }

    // 组件卸载或路径变化时，移除监听
    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, [location.pathname]); // 依赖路径变化，确保路由切换时更新监听状态

  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
    // 双重校验：确保当前处于目标路径才触发弹窗
    if (location.pathname !== '/compList') return;
    
    event.preventDefault();
    event.returnValue = ""; // 部分浏览器需要此值触发弹窗
    return ""; // 兼容旧版浏览器
  };

  // 组件其余逻辑...
}

关键说明： #

• 路径监听：通过useLocation获取当前路由路径，让useEffect在路径变化时重新执行，自动清理旧监听并根据新路径决定是否添加新监听。
• 双重校验：在handleBeforeUnload里再次判断路径，避免因异步操作或路由切换延迟导致的误触发。
• 组件命名规范：把组件名改成首字母大写的CompList，符合React组件的命名要求，避免潜在的渲染问题。

额外注意： #

不同浏览器对beforeunload的弹窗文案有严格限制，无法自定义“确定要退出吗？”这类内容，只能触发浏览器自带的默认确认弹窗。

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