Должны ли перерисовываться все компоненты при переходе по ссылке react-router?

Question

[ASiD]

Добрый день. Есть приложение примерно такой структуры:

<BrowserRouter>
  <Header />
  <div className="main_block">
    <div className="main_block_content">
      <Switch>
        {routes.map((route, idx) => <Route key={idx} {...route} />)}
      </Switch>
    </div>
  </div>
  <Footer />
</BrowserRouter>

В массиве routes объекты вроде этого:

{ path: '/about', exact: true, component: PageAboutContainer }

Ссылки для перехода между страницами реализованы с помощью компонента Link из react-router-dom.

Добавил в компонент Header console.log('header'). Сообщение выдаётся при каждом переходе между страницами, т.е. при каждом переходе компонент рендерится заново.

Данные в Redux при этом не сбрасываются на умолчания. Если вписать console.log('header.jsx') в файле с хедером за пределами компонента, сообщение выдаётся один раз при загрузке приложения, т.е. физически файлы не перезагружаются.

Подскажите, так и должно быть или у меня косяк в коде? В моём понимании, хедер и футер перерисовываться не должны.

Answer 1

[Alexandroppolus]

Используй React.memo для хедера и для футера. Или, если это классовые компоненты, наследуй от PureComponent.

Обычные компоненты, которые не memo, всегда перерисовываются при перерисовке парента.

Либо, как вариант, их можно вынести за пределы BrowserRouter, а последний оформить отдельным компонентом