React Router Dom v6 检测用户离开页面并做一些事情

Question

我希望当用户离开页面我们去其他路线时发生调度

useEffect(()=>{
  if(userLeave){
     dispatch(clearData())
  }
},[userLeave])

如果您知道当用户离开页面或转到其他路线时我可以在哪里进行调度，我们还有其他示例

Answer 1

试试这个，我认为这可能有效。

       window.addEventListener("beforeunload", function (e) {
            e.preventDefault();
            e.returnValue = '';
            dispatch(clearData())
        })

Answer 2

在您的路由呈现的组件中尝试此操作：

useEffect(()=>{
   return ()=> dispatch(clearData())
},[])

例如，您有一个“/home”路径名并且正在渲染主页组件：

const  Home = ()=> {

useEffect(()=>{
    return ()=> dispatch(clearData())
},[])

return (
    <div>
        Hello
    </div>
);

}

导出默认主页；

return 在 useEffect 中的作用类似于 componentDidUnmount，您可以将其用于您的目的

React Router Dom v6 检测用户离开页面并做一些事情

React Router Dom v6 Detect user leave page and do somthing

reactjs

react-router-dom