页面如何检测到用户已离开以访问 SPA 中的另一个页面？ （ReactJs，React Route Dom V6）

Question

我正在做一个流媒体电影网站，所以我想保存用户的观看时长。我面临的问题是我不知道如何检测用户的更改页面以保存信息。

这是我的代码的结构：

`<Router>
    <AppContainer>
      <Routes>
        <Route pathnam='/movie/:movieId/:episodeId' element={<Watching />}/> 
        /*I need to check when A is exited*/
      <Routes>
    </AppContainer>
</Router>`

我可以通过窗口的 beforeunload 事件检测它们何时关闭或重新加载页面。

我还尝试检查应用程序容器中的路径名更改，并且它有效，但我的监视组件不知道它何时退出以将信息提供给应用程序容器。

我想将信息持续保存到本地存储，但这对我的网站来说似乎性能很差。

因此，如果您对我的问题有任何解决方案，请帮助我！

P/s：我认为代码没有帮助，所以我没有把它带到那里，但如果您需要代码的任何部分，我会为您提供。

Answer 1

经过研究，我发现window的popstate事件，它可以检测我们何时离开页面。