React中beforeunload事件监听实现页面离开提示失效问题排查

核心原因1：浏览器对beforeunload的严格限制 #

现代Chrome、Safari等浏览器为避免恶意弹窗骚扰用户，已完全禁止在beforeunload事件中调用自定义弹窗（比如alert()），这类代码会直接被浏览器拦截。同时你设置的event.returnValue = ""是空字符串，不符合浏览器触发原生提示的要求——必须设置非空字符串的returnValue，或返回一个非空字符串，才能唤起浏览器自带的离开确认框。

原因2：缺少事件清理（非直接触发问题，但需规范） #

你的代码没有在组件卸载时移除beforeunload监听，虽不是当前无触发的主因，但长期会导致内存泄漏，属于不规范写法。

原因3：浏览器的静默触发规则 #

如果页面没有任何用户交互（比如打开后直接刷新），或通过快速后退导航，部分浏览器会跳过beforeunload提示，这是浏览器的防滥用机制。

修正后的代码示例 #

useEffect(() => {
  const handleBeforeUnload = (event) => {
    // 必须调用preventDefault，兼容部分浏览器
    event.preventDefault();
    // 设置非空提示文本，触发原生确认框
    const warningText = "你有未保存的内容，离开后更改会丢失";
    event.returnValue = warningText;
    // 返回文本，兼容Firefox等其他浏览器
    return warningText;
  };

  window.addEventListener("beforeunload", handleBeforeUnload);

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

注意事项 #

• 无法自定义弹窗样式，只能使用浏览器原生的确认框，文本内容也可能被浏览器截断或替换（比如Chrome会统一显示"此页面要求您确认是否要离开 - 您输入的数据可能不会被保存"）。
• 必须确保页面有用户交互（比如点击、输入）后，beforeunload提示才会触发，无交互时浏览器会静默跳过。

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