REACT HOOKS实现离开页面、刷新页面的时候,强制提醒
工作中遇到这个需求,网上对于HOOKS实效这个效果的文章很少,所以记录一下。其实很简单,几行代码就可以实现了。
function beforeunload (e) {
let confirmationMessage = '你确定离开此页面吗?';
(e || window.event).returnValue = confirmationMessage;
return confirmationMessage;
}
useEffect(()=>{
return ()=>{
window.removeEventListener("beforeunload", beforeunload)
// 这里写离开页面的后续操作
// 项目中这个页面使用了websocket。所以在页面离开的时候,需要将websocket关闭掉
// 关闭websocket
ws.close()
}
},[])
useEffect(()=>{
// 拦截判断是否离开当前页面
window.addEventListener('beforeunload', beforeunload);
},[])