I have a scenario when user clicks on browser refresh, the page routing has to be changed. I have tried using the below code during mounting/unmounting phase, but no luck.

useEffect(()=>{
  window.addEventListiner("beforeUnload", changeRoute);
  return()=>{
    window.removeEventListiner("beforeUnload", changeRoute);
  }
},[])
const changeRoute = (e) =>{
  e.prevantDefault();
  pros.history.push('/somepage');
}

With this code, I can see the url is changing to '/somepage' and re-navigating to the same page again. It is not moving to '/somepage'. Can anyone advice me please?