在React上更改路由时，Header组件保持重新渲染

Question

当按下{Link}并更改路由时，即使在react router dom的交换机组件之外，报头组件NavBar也会保持重新命名。

这里是文件：

Main index.js文件：

js lang-js prettyprint-override">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组件作为交换机外部的头。

Answer 1

@mattyJ我正在使用react-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>
    )
  }
}