浏览器返回按钮确认后无法返回且弹窗循环问题求助

你的问题根源在这两处：

• 每次触发popstate事件后调用window.history.pushState，会往浏览器历史栈新增一条当前页面记录。用户确认返回时调用window.location.back()，实际只是回到这条新增记录，再次触发popstate，导致弹窗无限循环。
• 用户确认返回时，window.location.back()会再次触发popstate事件，重复执行弹窗逻辑。

直接按以下方式修改代码即可解决：

const handleBrowserBackBtn = () => {
  handleBackClick();
};

useLayoutEffect(() => {
  // 初始化时添加带标记的历史记录，避免首次返回直接跳转
  window.history.pushState({ isCustom: true }, document.title, window.location.href);
  
  const handlePopState = (event) => {
    // 仅处理非自定义标记的返回操作
    if (!event.state?.isCustom) {
      handleBrowserBackBtn();
      // 重新添加自定义记录，维持历史栈状态
      window.history.pushState({ isCustom: true }, document.title, window.location.href);
    }
  };

  window.addEventListener("popstate", handlePopState);
  return () => {
    window.removeEventListener("popstate", handlePopState);
  };
}, [addingNew, editing]); // 状态变化时重新绑定事件

const handleBackClick = () => {
  if (addingNew || editing) {
    if (confirm("You have unsaved changes. Are you sure you want to go back?")) {
      // 先移除事件监听，切断循环触发路径
      window.removeEventListener("popstate", handleBrowserBackBtn);
      // 直接跳转首页，替代location.back()避免历史栈问题
      window.location.href = "/";
    }
  } else {
    // 无未保存更改时直接跳转首页
    window.location.href = "/";
  }
};

关键修改说明：

• 给pushState的state添加isCustom标记，区分自定义历史记录和原生返回操作
• 用户确认返回时直接跳转首页（window.location.href = "/"），避免location.back()触发的popstate循环
• 确认返回前先移除事件监听，彻底避免循环触发
• 将addingNew和editing加入useLayoutEffect依赖数组，确保状态变化时事件逻辑同步更新

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