如何在反应路由器中的每次路由更改时监听窗口负载？答案

【问题标题】：How do I listen for window load upon each route change in react router?如何在反应路由器中的每次路由更改时监听窗口负载？
【发布时间】：2019-04-12 11:59:18
【问题描述】：

我正在使用具有多个路由的 react-router 构建一个项目。代码如下所示：

<Router>
  <div className='main'>
    <Header />
    <div className='main-content'>
      <Switch>    
        <Route exact path="/about" render={({history: {location}}) => <About/>}/>
        <Route exact path="/contact" render={({history: {location}}) => <Contact/>}/>
        <Route exact path="/blog" render={({history: {location}}) => <Blog/>}/>
      </Switch>
    </div>
    <Footer /> 
  </div>
</Router>

在每个路由的组件中，我添加了一个生命周期方法 ComponentDidMount()，为“加载”设置一个事件侦听器，然后运行一个回调。

componentDidMount() {
  window.addEventListener('load', () => this.handleLoad());
}

handleLoad() {
  console.log('this page loaded');
}

这在加载的第一条路由上按预期工作，控制台将记录“已加载此页面”。但是，当请求任何后续路由时，事件侦听器不再侦听下一个组件的负载（可能是因为事件侦听器仍在原位？）

如何监听多条路由的页面加载情况？

【问题讨论】：

您预计load 事件何时触发？它只会在浏览器最初加载时触发一次，在所有资源都完成加载之后。
React 切换路由时，只是修改页面内容，而不是加载新页面，所以load 事件不会再次触发。
React 路由器不会导致页面加载浏览器实际上并没有导航到新的 url
@PatrickEvans 我不想检测路线变化，我想在新路线的组件中的所有内容加载后执行操作。
@Herohtar 感谢您提供该资源。我实际上正在等待图像加载。组件正在渲染/安装，但图像在组件渲染后加载。我可以处理这个。谢谢

标签： javascript reactjs react-router

【解决方案1】：

根据我的知识，整个反应应用程序一次加载到用户电脑上，然后它只是根据路线改变外观，并且不会花费任何时间来加载。但如果你愿意，你可以听 api fetchs。

【讨论】：