- 监听浏览器回退事件
在hooks组件使用
useEffect(() => {
window.onpopstate = function (e: PopStateEvent) {
// 业务逻辑
};
return () => {
// 回退事件只用于当前组件，则需要在组件销毁时把回退事件销毁
window.onpopstate = null;
};
}, []);
这个事件仅限于监听浏览器回退事件做一些业务逻辑处理，并不能阻止浏览器回退
- 阻止浏览器回退
useEffect(() => {
window.history.pushState(null, null, document.URL);
window.onpopstate = function (e: PopStateEvent) {
window.history.pushState(null, null, document.URL);
};
return () => {
// 回退事件只用于当前组件，则需要在组件销毁时把回退事件销毁
window.onpopstate = null;
};
}, []);
网友评论