I have a react app that I want to automatically start at the top of the page whenever I navigate to that page, regardless of how a user gets there (i.e. clicking a Link component that links to that page, or using back button to go back and forward)

I have a ScrollToTop component that uses window.scrollTo(0, 0) method that scrolls to the top whenever the pathname changes. However, this only works on navigating via Links but not back and forward buttons on the browser.

ScrollToTop.tsx

...Imports

const useBackButton = (): boolean => {
  const navType = useNavigationType()
  return navType === NavigationType.Pop
}

const ScrollToTop: React.FC = () => {
  const { pathname } = useLocation()
  const isPop = useBackButton()

  const scrollToTop = (): void => {
    window.scrollTo(0, 0)
  }

  useEffect(() => {
    console.log(pathname, isPop)
    scrollToTop()
  }, [pathname, isPop])

  useEffect(() => {
    window.addEventListener('beforeunload', scrollToTop)
    console.log('On Mount')
    return () => {
      window.removeEventListener('beforeunload', scrollToTop)
      console.log('On Unmount')
    }
  }, [])

  return (
    <>
      <Outlet />
    </>
  )
}

export default ScrollToTop

App.tsx

...Imports

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<ScrollToTop />}>
      <Route path='/' element={<RootLayout />}>
        <Route path='*' element={<NotFound />} />
        <Route index element={<Landing />} />
        <Route path='auth' element={<Auth />} />
        <Route path='ideate' element={<IdeatorLayout />}>
          <Route path=':sessionID' element={<Display />} />
        </Route>
        <Route path='privacy' element={<Privacy />} />
      </Route>
    </Route>
  )
)

export const App: React.FunctionComponent = () => {
  useAuthControl()

  return <RouterProvider router={router} />
}

Any help would be appreciated. Thanks in advance!