Reactjs 浏览器后退按钮确认

我正试图与盖茨比达成以下目标

用户在表单页面上，如果他们点击浏览器后退按钮，就会出现一个弹出窗口，询问他们是否要离开

如果用户选择

ok

，则它将返回

如果用户选择

取消

，则它将保留在此页面上

我能够“几乎”通过以下方式实现

useEffect(() => {
    const confirmExit = e => {
      const leaveThisPage = window.confirm("Would you like to leave this page?")
      if (!leaveThisPage) {
        window.history.forward()
      }
    }
    window.addEventListener("popstate", confirmExit)
    return () => {
      window.removeEventListener("popstate", confirmExit)
    }
  }, [])

有一个问题，如果用户选择

取消

，则浏览器将转到上一页。然后

window.history.forward（）

将启动并将它们发送回

我注意到

popstate

事件无法取消，因此

e.preventDefault（）

无法工作

---

注意：我还尝试使用

window.onbeforeuload

进行测试，但它仅在我靠近window时触发，或者如果我的上一个窗口来自我的应用程序之外时触发。我的问题有解决办法吗？

盖茨比在引擎盖下使用@reach/router，它不支持拦截和阻止导航（我的重点）：

没有历史封锁。我发现我仅有的一个用例是阻止用户从半填的表单中导航。只需将表单状态保存到会话存储中，并在它们返回时将其带回来就非常容易了，而且当您离开应用程序时（比如到另一个域），不会发生历史阻止。这使我没有真正使用历史记录阻塞，总是选择将表单状态保存到会话存储。（）

我支持使用保存表单状态的建议