javascript - 在 React 上更改 Route 时，Header 组件不断重新渲染

Question

当按下 {Link} 并更改 Route 时，标题组件 NavBar 会继续重新渲染，即使在 react-router-dom 的 Switch 组件之外也是如此。

这里是文件：

主 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>
    )
  }
}

主页.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>
    )
  }
}

联系.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 之外的标题。

标签： javascriptreactjsreact-router-v4react-router-dom

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

Pages 封装了两个组件：App，我的问题中的 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 />
  }
}