Detect browser reload in reactJS

Question

I'm trying to detect browser reload in my react application. I've looked around many solutions but no solution was right for me.

What I want to do is detect browser reload from a specific page. Some of the solutions I tried were almost correct but the issue is it cannot differentiate the browser reload and normal navigation. For ex: the solutions I used could trigger when the browser is being reloaded. But they also trigger when I come to that page using router. What can I do to limit my solution to only trigger when the browser is being reloaded.

The solutions I tried

  useEffect(()=>{
    if (typeof window !== undefined) {
      if (window.performance) {
        if (performance.getEntriesByType("navigation")[0].type === 'reload') {
          alert('This page is reloaded');
        } else {
          alert('This page is not reloaded');
        }
      }
    }
  },[])

And

  useEffect(() => {
    console.log("AAAAAAA",window.performance.navigation)
  },[]);