Question

我正在尝试通过盖茨比实现以下目标

用户位于表单页面上，如果按下浏览器后退按钮，则会弹出一个对话框，询问他们是否要离开。
如果用户选择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进行测试，但是它仅在我靠近窗口或以前的应用程序外部触发时才触发。我的问题可以解决吗？

Answer 1

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

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

我第二次推荐使用localStorage保存表单状态。

在浏览器后退按钮上进行确认

1 个答案: