Нужен мой компонент верхнего уровня приложения для повторного рендеринга при изменении маршрута с использованием response-router-dom

Question

Прямо сейчас у меня есть следующая структура:

index. js

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App/>
    </Router>
  </Provider>
,document.getElementById('root'));

Приложение. js

// LOTS OF CODE...

console.log("Rendering App...");

return(
  <React.Fragment>
    <Header/>
    <AllRoutes/>
    <Footer/>
  </React.Fragment>
);

AllRoutes. js

// SOME CODE...

console.log("Rendering AllRoutes...");

return(
  <Switch>
    <Route exact path={ROUTE1} component={Component1}/>
    <Route exact path={ROUTE2} component={Component2}/>
  </Switch>
);

Когда я меняю маршруты между ROUTE1 и ROUTE2, единственным компонентом, который выполняет рендеринг, является компонент, отображаемый из приложения <Route>.

, не выполняет повторную визуализацию, в противном случае я бы увидел журнал Rendering App..., которого я не являюсь.

Единственная вещь, которая выполняет визуализацию, - это компоненты внутри <Switch>, которые отображаются из <Route>'s.

Я ожидал, что <App/> будет повторно визуализироваться, так как будет создан новый объект местоположения, из компонента <Router>, который является родитель <App/>.

PS: я использую это:

import { BrowserRouter as Router} from 'react-router-dom';

"react-router-dom": "^5.1.2" // ROUTER VERSION

Как я могу сделать App повторный рендеринг при изменении маршрута в этой ситуации?

Должен ли я использовать useLocation крючок? Как ведет себя на сервере для SSR?