reactjs 如何在React Router v6.4.2中检测离开当前页面

cvxl0en2 于 2023-01-12 发布在 React

关注(0)|答案(1)|浏览(134)

我想检测它，然后运行自定义提醒提示。我尝试使用beforeunload侦听器：

window.addEventListener("beforeunload", reloadPrompt)

但它只在我单击浏览器的重新加载按钮时才起作用，如果我单击导航栏中的Navlink或Link或内部定向到其他路线的按钮，它就不起作用。
我也尝试使用useLocation钩子，如下所示：

const location = useLocation();
useEffect(()=>{
  console.log(location)
},[location])
  useEffect(() => {

但当我手动点击导航栏的链接时，它仍然不起作用，当我手动点击浏览器中的返回按钮时，它起作用。
我读到在React路由器的遗留版本中有一些钩子，如usePrompt或useBlocker，但在当前版本中没有提供。
有谁能告诉我如何实现这个功能，真的很感谢。

1条答案

也许你可以试试这个代码博客，你检测路由器改变。

const history = useHistory(); 
useEffect(() => {
history.listen(() => {
  //some functions
});
}, [history]);