React页面刷新时用自定义Modal替代默认提示的实现问题

你的代码思路方向是对的，但存在两个核心问题导致无法达到预期效果：

• 浏览器出于安全限制，只要在beforeunload事件中调用event.preventDefault()或设置event.returnValue，就一定会弹出自身的默认提示框，无法完全替换
• React的setState是异步操作，beforeunload事件触发时，setShowModal(true)可能还没完成Modal渲染，页面就已经进入卸载流程

下面是修正后的实现方案，优先拦截用户主动触发的刷新操作（如键盘快捷键），让自定义Modal正常显示，同时处理页面卸载的边界情况：

import { useState, useEffect } from 'react';

const CustomRefreshModal = () => {
  const [showModal, setShowModal] = useState(false);
  const [allowUnload, setAllowUnload] = useState(false);

  // 拦截键盘触发的刷新操作
  const handleKeyDown = (e) => {
    // 匹配F5、Ctrl+R、Cmd+R
    const isRefreshKey = e.key === 'F5' || (e.ctrlKey && e.key === 'r') || (e.metaKey && e.key === 'r');
    if (isRefreshKey) {
      e.preventDefault();
      setShowModal(true);
    }
  };

  // 处理beforeunload事件（关闭标签页/窗口时触发）
  const handleBeforeUnload = (e) => {
    if (!allowUnload) {
      e.preventDefault();
      e.returnValue = ''; // 触发浏览器默认提示，无法完全避免
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [allowUnload]);

  // 确认刷新
  const handleConfirmRefresh = () => {
    setAllowUnload(true);
    setShowModal(false);
    window.location.reload();
  };

  // 取消刷新
  const handleCancelRefresh = () => {
    setShowModal(false);
  };

  return (
    <>
      {/* 你的自定义Modal组件 */}
      {showModal && (
        <div className="custom-modal">
          <div className="modal-content">
            <p>确定要刷新页面吗？</p>
            <button onClick={handleConfirmRefresh}>确认刷新</button>
            <button onClick={handleCancelRefresh}>取消</button>
          </div>
        </div>
      )}
    </>
  );
};

export default CustomRefreshModal;

关键说明： #

• 拦截键盘刷新：通过监听keydown事件，识别F5、Ctrl+R、Cmd+R等刷新快捷键，阻止默认行为后直接显示自定义Modal，这部分可以完全替代浏览器提示
• beforeunload处理：当用户点击浏览器标签页关闭按钮或通过其他方式触发页面卸载时，浏览器的默认提示无法完全禁用，这里通过allowUnload状态控制，只有用户确认刷新后才允许页面正常卸载
• 状态同步：使用allowUnload确保只有用户明确确认后，才跳过浏览器的默认提示，避免意外卸载

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