Adding a hook which would help with view transitions

[filipegeric]

Right now, in order to perform a view transition when navigating something like this is required:

const ExamplePage = () => {
  const navigate = useNavigate()

  return (
    <div>
      <h1>Example Page</h1>
      <button onClick={() => document.startViewTransition(() => navigate("/"))}>
        Go back
      </button>
    </div>
  )
}

However this doesn't work when the user clicks back button in the browser for example. In order to handle something like this I tried using the navigation API (https://developer.chrome.com/docs/web-platform/navigation-api/) alongside react router, but I failed to achieve what I wanted.

Ideally, there would be a hook that would enable this. Something like:

const ExamplePage = () => {
  
  useBeforeRouteChange(next => {
    document.startViewTransition(() => next())
  })

  return (
    <div>
      <h1>Example Page</h1>
      <Link to="/">Go back</Link>
    </div>
  )
}

Is something like this already possible to achieve in some way, and if not would it be possible to implement in the following versions?
Thanks!