0

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

  1. 用户在表单页面上，如果他们点击浏览器的后退按钮，会出现一个弹出窗口，询问他们是否要离开。
  2. 如果用户选择ok，那么它将返回。
  3. 如果用户选择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，但它仅在我关闭窗口或我以前来自我的应用程序之外时触发。我的问题有解决办法吗？

4

1 回答 1

0

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

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

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

于 2020-09-22T22:44:32.090 回答