如何解决在浏览器后退按钮上进行确认
我正在尝试通过盖茨比实现以下目标
- 用户位于表单页面上,如果按下浏览器后退按钮,则会弹出一个对话框,询问他们是否要离开。
- 如果用户选择
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
进行测试,但是它仅在我靠近窗口或以前的应用程序外部触发时才触发。我的问题可以解决吗?
解决方法
盖茨比在幕后使用@ reach / router,它不支持拦截和阻止导航(重点是我的):
没有历史记录阻塞。我发现,我唯一的用例是阻止用户导航到一半填写的表单。 仅将表单状态保存到会话存储中并在它们返回时将其恢复不仅非常容易,而且当您离开应用程序(例如转到另一个域)时,不会阻止历史记录。这使我无法真正使用历史记录阻止功能,并且始终选择将表单状态保存到会话存储中。 (Source)
我第二次推荐使用localStorage
保存表单状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。