取消导航时如何防止后退和前进浏览器按钮导致页面重新加载并丢弃state。 React-router v4.3

Question

我有一个页面，它接收许多用户输入并使用反应上下文 object 保存它们。 我遇到的问题是，如果有人在保存条目之前离开页面，我希望提示用户继续或取消并保持当前页面和 state 完好无损。 我最初在 useEffect 挂钩中使用类似这样的代码进行了设置，该挂钩观察了输入中的 state 变化。

useEffect(() => {
    window.onbeforeunload = () => {
        return true
    }
},[someState])

这适用于所有类型的浏览器导航（刷新按钮、主页按钮、关闭 window、输入新的 url 等），但在浏览器中单击后退或前进按钮时无效。

当 state 更改为不触发页面刷新时，如何获取它以便单击浏览器中的后退和前进按钮？

Answer 1

这是对我的问题的简单修复。 如果您查看 window.onbeforeunload 的文档，您会看到它提到了调用此方法时 chrome 和 firefox 的行为方式。 具体来说，需要根据使用的浏览器明确设置两件事。 https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

通过将这两行添加到 useEffect 挂钩中的 window.onbeforeunload 中，我们获得了所需的行为，即后退和前进按钮不会触发页面上的刷新。

useEffect(() => {
    window.onbeforeunload = () => {
        // For chrome
        e.returnValue = ''
    }
},[someState])