Should all components be re-rendered when following a react-router link?

Question

React

Good afternoon. I have an application with the following structure:

<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>

In the routes array, objects like this:

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

Links for navigating between pages are implemented using the Link component from react-router-dom.

Added console.log('header') to the Header component. The message is issued on each transition between pages, i.e. with each transition, the component is re-rendered.

The data in Redux is not reset to default. If you write console.log('header.jsx') in a file with a header outside of the component, the message is issued once when the application loads, i.e. physically files are not reloaded.

Tell me, is it supposed to be like this or is there a jamb in my code? In my understanding, the header and footer should not be redrawn.

Answer 1

Use React.memo for the header and footer. Or, if they are class components, inherit from PureComponent.
Regular non-memo components are always re-rendered when the parent is re-rendered.
Or, as an option, they can be moved outside the BrowserRouter, and the latter can be issued as a separate component