时间戳

首页 > 解决方案 > 取消导航时如何防止后退和前进浏览器按钮导致页面重新加载和丢弃状态。反应路由器 v4.3

javascript - 取消导航时如何防止后退和前进浏览器按钮导致页面重新加载和丢弃状态。反应路由器 v4.3

问题描述

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

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

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

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

标签： javascriptreactjs

解决方案

这是对我的问题的简单修复。如果您查看 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])

推荐阅读