React Router Dom v6 Detect user leave page and do somthing-CodePudding

I want when user leave the page our go to other routes a dispatch happen

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

our any other examples if you have an idea where i can do a dispatch when user leave the page or go to other routes

CodePudding user response：

try this, i think this might work.

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

CodePudding user response：

try this in Component where your route renders:

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

for example, you have a '/home' pathname and you are rendering Home Component:

const  Home = ()=> {

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

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

}

export default Home;

return in useEffect acts like componentDidUnmount you can use it for your purpose