ReactJS 如何实现页面关闭或刷新时弹出确认提示？

现代主流浏览器出于安全限制，不允许自定义beforeunload事件的提示文案，所有弹窗内容均为浏览器默认生成，你无法修改弹窗的文本、按钮样式与文案。

基础通用实现（无条件拦截） #

import { useEffect } from 'react';

function YourComponent() {
  const alertUser = (e) => {
    // 阻止默认行为，兼容旧版浏览器
    e.preventDefault();
    // 标准要求：给returnValue赋值非空字符串
    e.returnValue = '';
    // 部分浏览器需要return非空字符串
    return '';
  };

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

  // 你的组件其他逻辑...
  return <div>你的组件内容</div>
}

更常用的实现：仅存在未保存内容时拦截 #

大多数场景不需要所有情况都拦截，只有用户有未提交的表单、未保存的修改时才触发提示，实现如下：

import { useState, useEffect } from 'react';

function EditForm() {
  // 控制是否需要拦截的状态，比如用户修改了表单后设为true，提交成功后设为false
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);

  const alertUser = (e) => {
    // 没有未保存内容直接放行
    if (!hasUnsavedChanges) return;

    e.preventDefault();
    e.returnValue = '';
    return '';
  };

  useEffect(() => {
    window.addEventListener("beforeunload", alertUser);
    return () => {
      window.removeEventListener("beforeunload", alertUser);
    };
  }, [hasUnsavedChanges]); // 注意依赖项要加hasUnsavedChanges，保证监听器拿到最新的状态

  // 示例：表单输入修改时标记为未保存
  const handleInputChange = () => {
    setHasUnsavedChanges(true);
  };

  // 示例：提交表单后标记为已保存
  const handleSubmit = () => {
    // 提交逻辑...
    setHasUnsavedChanges(false);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleInputChange} />
      <button type="submit">提交</button>
    </form>
  )
}

额外注意事项 #

• 该拦截仅对页面刷新、关闭浏览器标签/窗口、跳转外部链接等操作生效，React 路由的内部跳转不会触发beforeunload事件，需要单独做路由拦截逻辑。
• 你在e.returnValue中赋值的任意自定义文本都不会在现代浏览器中显示，弹窗内容完全由浏览器控制。
• 无法通过该事件实现自定义UI的弹窗，只能使用浏览器原生的确认弹窗。

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