确认浏览器后退按钮答案

【问题标题】：Confirmation on browser back button确认浏览器后退按钮
【发布时间】：2020-09-22 18:24:53
【问题描述】：

我正在尝试通过 Gatsby 实现以下目标

用户在表单页面上，如果他们点击浏览器的返回按钮，会出现一个弹出窗口，询问他们是否要离开。
如果用户选择ok，则返回。
如果用户选择cancel，那么它将停留在此页面上

通过执行以下操作，我能够“几乎”实现它

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)
    }
  }, [])

有一个问题，如果用户选择cancel，那么浏览器会转到上一页。然后window.history.forward() 会触发并将它们发送回去。

我注意到popstate 事件无法取消，因此e.preventDefault() 将不起作用。

注意：我也尝试使用window.onbeforeunload 进行测试，但它仅在我关闭窗口或我之前来自我的应用程序之外时触发。我的问题有解决办法吗？

【问题讨论】：

标签： reactjs gatsby browser-history browser-api

【解决方案1】：

Gatsby 在后台使用 @reach/router，它不支持拦截和阻止导航（强调我的）：

没有历史记录阻塞。我发现我唯一的用例是阻止用户离开填写一半的表单。 只需将表单状态保存到会话存储并在它们返回时将其恢复不仅非常容易，而且当您离开应用程序（例如转到另一个域）时也不会发生历史记录阻塞.这使我无法实际使用历史记录阻止并始终选择将表单状态保存到会话存储中。 (Source)

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

【讨论】：