Как прослушивать загрузку окна при каждом изменении маршрута в реагирующем маршрутизаторе?

Question

Я строю проект с реагирующим маршрутизатором, который имеет несколько маршрутов. Код выглядит так:

<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');
}

Это работает, как и ожидалось, при первой загрузке маршрута, и консоль будет регистрировать «эта страница загружена». Однако, когда запрашивается любой последующий маршрут, прослушиватель событий больше не прослушивает загрузку следующего компонента (возможно, потому что прослушиватель событий все еще находится на месте?)

Как прослушать загрузку страницы на нескольких маршрутах?