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（），为“ load”设置了事件监听器，然后运行了回调。

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

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

如何侦听多条路线上的网页加载？

Answer 1

基于我的知识，整个React应用程序会立即在用户PC上加载，然后仅根据路线更改外观，而无需花费任何时间进行加载。但是您可以根据需要收听api提取。

如何在React Router中的每个路由更改时侦听窗口负载？

1 个答案: