react阻止用户通过浏览器的后退按钮离开当前页面&阻止浏览器后退。

useEffect(() => {
window.history.pushState(null, '', document.URL);
window.onpopstate = function () {
window.history.pushState(null, '', document.URL);
};
return () => {
// 回退事件只作用于当前组件，则需要在离开页面、组件销毁时把回退事件销毁
window.onpopstate = null;
};
}, []);

直接复制上述代码到hooks页面

1. window.history.pushState(null, '', document.URL);：这行代码将当前的URL添加到浏览器的历史堆栈中。pushState方法接受三个参数：状态对象、标题（大多数浏览器目前都忽略这个参数）和URL。在这里，状态对象和标题都被设置为null，URL被设置为当前文档的URL。

2. window.onpopstate = function () {...}：这行代码定义了一个处理popstate事件的函数。popstate事件在活动历史记录条目更改时触发，例如用户点击浏览器的后退按钮。在这个函数中，它又一次调用pushState方法，将当前URL再次添加到历史堆栈中。这样做的结果是，用户无法通过点击后退按钮来离开当前页面。

3. return () => {...}：这是useEffect钩子的清理函数，它在组件卸载时运行。在这个函数中，它将window.onpopstate设置为null，从而移除了之前定义的popstate事件处理函数。

这样就能够让用户无法通过点击后退按钮来离开当前页面。