8

React-Router-DOM 弹窗拦截浏览器关闭页面

 3 years ago
source link: https://paugram.com/coding/react-router-dom-prompt.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

React-Router-DOM 弹窗拦截浏览器关闭页面

2021.04.05进击的码农 0 559

大家都在写博文，最怕的就是博文内容没有成功保存了。那么有什么办法可以减少遇到这样的情况呢？自然就是想办法让「窗口」不能被关掉呀。

那么问题来了，有什么方法可以拦截呢？这个问题我寻找了很久很久，才得知 Window 有一个叫做 onbeforeunload 的事件。

这个事件的编写方式，大概长这样：

window.addEventListener("beforeunload", function (ev){
  ev.preventDefault();
  ev.returnValue = '是否保存？';
});

但它只适合普通页面，并不适用于 React 编写的网页，我的写法是加在 componentDidMount 初始化，componentWillUnmount 清除这个 Event，但是我发现这样写的话，只要 Unmount 就去除了 Event，根本就不会弹窗询问。

这很有可能是压根无法触发此事件，所以我在寻找着 React 下的写法，一番搜索过后，我终于找到了答案。

首先引入 Prompt 组件，然后在你的 render 里面编写以下内容：

import {Prompt} from "react-router-dom";
<Prompt
  when={hasModified}
  message="修改还没保存，确定离开吗？"
/>

PS：此处的 hasModified 是一个 State，需要自己指定。在我代码里面的用途，是指修改过日记里的内容。

来源于官方文档

通过浏览器开发工具，可以看出 React-Router-DOM 的写法，并非使用了 window.onbeforeunload 这个事件，毕竟它的前进后退都是通过修改 History 实现的。我的猜测就是在切换页面前，使用了 window.prompt 拦截（所以可以显示自定义的内容），根据选中的按钮，来决定是否改变页面内容并修改 History。

为什么我这么肯定呢？因为当我尝试直接「刷新/关闭」我上面 React-Router-DOM 写的那个网页，会完全没有效果。只有前进后退才有！

总的来说，这还是没能完美解决页面容易被关闭的问题（非 React 的话效果还是很不错的），还是老老实实养成多多保存的习惯吧！

Paul

特立独行的一只前端菜狗。本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！如本站内容对你有所帮助的话，不妨 捐助支持 一下？同时欢迎订阅关注 我的日记，唠嗑（分享）每日的折腾经历。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK