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

Posted 2023-02-21

【中文标题】在 React 上更改 Route 时，Header 组件不断重新渲染

【英文标题】：Header component keeps rerendering when changing Route on React

【发布时间】：2019-08-01 07:26:55

【问题描述】：

当按下 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>
    )
  

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 外部的标题。

【问题讨论】：

我没有看到任何明显的东西。您使用的是什么版本的 react-router-dom，带有 Router 的组件是什么样的（将标记添加到问题中）？我在这里进行了测试，似乎一切正常codesandbox.io/s/jpnov36x95

一种可能的解决方案是向NavBar 添加一个key 属性来告诉react 它没有改变。示例：<NavBar key="navbar" />

【参考方案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 />