React中beforeunload监听浏览器后退按钮无效问题排查

你的代码只处理了页面卸载场景（关闭标签、刷新、关闭浏览器），但React单页应用的后退按钮属于客户端路由导航，不会触发beforeunload事件——这个事件仅在整个页面要被浏览器卸载时才会触发，而路由切换只是在当前页面内更新组件，不会卸载页面，所以不会弹出提示。这和安全限制无关，是事件触发场景的差异。

另外你的代码还有一个隐藏问题：添加和移除beforeunload监听时用了两个不同的匿名函数，导致组件卸载时无法正确移除监听，会造成内存泄漏。

完整解决方案 #

需要同时处理两种场景：页面卸载（保留beforeunload）和客户端路由导航（用React Router的拦截API）。

1. 修复beforeunload监听逻辑

先把监听函数抽成独立变量，确保添加和移除的是同一个引用：

import { useEffect, useState } from 'react';
import { unstable_usePrompt as usePrompt } from 'react-router-dom';

function FormComponent() {
  // 追踪表单是否有未保存更改
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);

  // 处理页面卸载场景
  const handleBeforeUnload = (e) => {
    if (hasUnsavedChanges) {
      e.preventDefault();
      e.returnValue = ""; // 部分浏览器需要这个值才会弹出默认提示
    }
  };

  useEffect(() => {
    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, [hasUnsavedChanges]);

  // 处理客户端路由导航（后退、前进、跳转链接）
  usePrompt({
    message: "你有未保存的更改，确定要离开吗？",
    when: hasUnsavedChanges
  });

  // 表单输入时更新未保存状态
  const handleInputChange = (e) => {
    // ... 处理表单输入逻辑
    setHasUnsavedChanges(true);
  };

  // 表单提交后重置状态
  const handleSubmit = (e) => {
    e.preventDefault();
    // ... 提交逻辑
    setHasUnsavedChanges(false);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单元素 */}
      <input type="text" onChange={handleInputChange} />
      <button type="submit">提交</button>
    </form>
  );
}

2. 关于React Router的API说明

• 如果使用React Router v6，usePrompt目前是unstable_usePrompt（API可能会变化，但实际项目中已广泛使用）。
• 如果你不想用不稳定API，可以用useBlocker手动实现拦截逻辑：

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

// 在组件内
const blocker = useBlocker(({ nextLocation }) => {
  if (hasUnsavedChanges) {
    return window.confirm("你有未保存的更改，确定要离开吗？");
  }
  return false;
});

关键注意点

• 必须通过hasUnsavedChanges状态精准控制提示时机，不要一直触发提示，避免打扰用户。
• 不同浏览器对beforeunload的提示文案限制不同，大部分浏览器会强制使用自身默认文案，自定义文案可能不生效，但e.returnValue = ""是触发提示的必要步骤。

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