Компонент заголовка продолжает перерисовываться при изменении маршрута на React

Question

При нажатии {Link} и изменении маршрута компонент заголовка NavBar продолжает рендеринг даже в том случае, если он находится вне компонента коммутатора из response-router-dom.

вот файлы:

Основной файл index.js:

import React from 'react'
import styles from './styles.css'
import {Route, Switch} from 'react-router-dom'
import Home from './Home'
import Settings from './Settings'
import Layout from './Layout'
import Contact from './Contact'
import NavBar from 'App/components/NavBar'

export default class MainHome extends React.Component {
  static propTypes = {}

  render() {
    return (
      <div className={styles.container}>
        <NavBar />
        <Switch>
          <Route path="/settings" component={Settings} />
          <Route path="/contact" component={Contact} />
          <Route path="/" component={Home} />
        </Switch>
      </div>
    )
  }
}

Home.js

import React from 'react'
import styles from './styles.css'
import {Link} from 'react-router-dom'

export default class Home extends React.Component {
  static propTypes = {}

  render() {
    return (
      <div className={styles.container}>
        <h1>Hello world</h1>
        <Link to="/contact">Contact</Link>
      </div>
    )
  }
}

Contact.js

import React from 'react'
import styles from './styles.css'
import {Link} from 'react-router-dom'

export default class Contact extends React.Component {
  static propTypes = {}

  render() {
    return (
      <div className={styles.container}>
        Contact
        <Link to="/">Home</Link>
      </div>
    )
  }
}

Текущий проект довольно прост: файл index.js содержит компоненты Home и Contact, а компонент NavBar - заголовок вне Switch.

Answer 1

@ MattyJ Я использую response-router-dom@^4.2.1.Компонент с маршрутизатором выглядит так:

import React from 'react'
import Root from 'App/Root'
import Pages from './Pages'
import {BrowserRouter} from 'react-router-dom'

export default class App extends React.Component {
  render() {
    return (
      <BrowserRouter key={Math.random()}>
        <Root>
          <Pages />
        </Root>
      </BrowserRouter>
    )
  }
}

Pages содержит два компонента: приложение, в котором находится компонент Switch из моего вопроса, и Auth для управления проверкой подлинности:

import React from 'react'
import authRouteRegex from './Auth/routeRegex'
import {withRouter} from 'react-router'
import PropTypes from 'prop-types'
import DynamicComponent from 'App/components/DynamicComponent'
import App from './App'

@withRouter
export default class Pages extends React.Component {
  static propTypes = {
    location: PropTypes.object
  }

  render() {
    if (authRouteRegex.test(this.props.location.pathname)) {
      const Component = DynamicComponent(() => import('./Auth'))
      return <Component />
    }
    return <App />
  }
}