javascript - 如何在 react 路由器中的每次路由更改时监听窗口负载？

Question

我正在使用具有多个路由的 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');
}

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

如何监听多个路由上的页面加载？

Answer 1

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