Next.js 实现浏览器回退时显示自定义模态框的问题问询

问题根因 #

alert和自定义Modal表现不一致的核心原因是两者的执行逻辑差异：

• alert是浏览器原生同步API，会阻塞整个JS主线程，包括浏览器的页面回退逻辑，只有用户关闭alert后回退才会继续执行，因此你能正常看到弹窗。
• 自定义Modal依赖React状态更新渲染，属于非阻塞异步逻辑，popstate触发时浏览器已经开始执行回退跳转，页面组件即将卸载，状态更新后没有足够时间完成渲染，因此看不到Modal。

除此之外你的代码还存在两个可优化点：

1. 没有完整处理历史栈逻辑，popstate触发后页面已经实际回退到上一级页面，当前组件直接被卸载
2. 没有添加useEffect清理函数，事件监听器未移除会导致内存泄漏、重复绑定等问题

解决思路 #

1. 修正历史栈逻辑，避免触发真实回退 #

进入页面时主动向历史栈推入一条当前页面的记录，用户点击回退时只会弹出你推入的这条记录，不会直接离开当前页

2. 补充清理逻辑，移除事件监听 #

组件卸载时主动移除popstate监听器，避免内存泄漏

3. 模态框操作后适配历史栈 #

• 用户点击模态框「取消」：重新推入一条历史记录，保证下次点击回退仍能触发弹窗
• 用户点击模态框「确认」：执行真实回退逻辑

修正后代码示例 #

import { useState, useEffect } from 'react';

const Page = () => {
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    // 进入页面时推入当前路由记录
    window.history.pushState(null, '', document.URL);

    const handlePopstate = () => {
      setShowModal(true);
    };

    window.addEventListener('popstate', handlePopstate);

    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('popstate', handlePopstate);
    };
  }, []);

  const handleConfirm = () => {
    setShowModal(false);
    // 确认回退，执行真实回退逻辑
    window.history.back();
  };

  const handleCancel = () => {
    setShowModal(false);
    // 取消回退，重新推入历史记录，恢复栈结构
    window.history.pushState(null, '', document.URL);
  };

  return (
    <div>
      {showModal && (
        <ModalComponent 
          onConfirm={handleConfirm}
          onCancel={handleCancel}
        />
      )}
    </div>
  );
};

额外说明 #

如果你的项目使用了React Router、Vue Router等路由框架，建议直接使用框架内置的路由拦截API（比如React Router v6的useBlocker），避免和框架自身的popstate监听逻辑产生冲突，稳定性更高。

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