React路由优化诉求：路由切换时仅更新内容而非重绘整页

你的核心问题在于每个页面组件（About/Works/Contacts）都重复渲染了Header组件，路由切换时会卸载旧页面、挂载新页面，导致Header被完全重绘，同时内容区域也跟着整个页面刷新。我们需要把Header抽离出来，让它只渲染一次，同时仅更新当前激活区块的内容。

具体优化步骤 #

1. 重构App组件，将Header与路由内容分离 #

把Header从页面组件中移到Switch外面，确保Header不会随路由切换而重新创建。同时用withRouter包装App，让它能获取路由的location信息：

import React from 'react';
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom';
import style from './../scss/style.scss';
import { Header } from './components/Header';
import { About } from './components/About';
import { Works } from './components/Works';
import { Contacts } from './components/Contacts';
import { NotFound } from './components/NotFound';

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="container">
          {/* Header放在Switch外层，仅渲染一次 */}
          <Header currentPath={this.props.location.pathname}>
            {/* 路由内容作为Header的子元素传递 */}
            <Switch>
              <Route exact path="/" component={About}/>
              <Route exact path="/works" component={Works}/>
              <Route exact path="/contacts" component={Contacts}/>
              <Route component={NotFound}/>
            </Switch>
          </Header>
        </div>
      </Router>
    );
  }
}

// 用withRouter注入路由信息
const AppWithRouter = withRouter(App);

render(<AppWithRouter />, window.document.getElementById('app'));

2. 简化页面组件（About/Works/Contacts） #

去掉页面组件中的Header，让它们仅返回内容部分：

// About.js（Works/Contacts同理修改）
import React from 'react';
import DocumentTitle from 'react-document-title';

export class About extends React.Component {
  render() {
    return (
      <DocumentTitle title='About'>
        <h1> About </h1>
      </DocumentTitle>
    );
  }
}

3. 修改Header组件，用状态管理当前路径 #

让Header通过状态跟踪当前路由，仅在路径变化时更新，避免不必要的重绘：

import React from 'react';
const PATHS = ['/', '/works', '/contacts'];
const PAGES = ['About', 'Works', 'Contacts'];
import { HeaderItem } from './HeaderItem';

export class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPath: props.currentPath
    };
  }

  // 监听路由变化，更新状态
  componentDidUpdate(prevProps) {
    if (prevProps.currentPath !== this.props.currentPath) {
      this.setState({ currentPath: this.props.currentPath });
    }
  }

  render() {
    const { currentPath } = this.state;
    const { children } = this.props;

    return (
      <header className="header">
        <nav className="nav">
          <div className="nav__list">
            {PATHS.map((path, index) => {
              const isActive = path === currentPath;
              // 仅向激活的HeaderItem传递内容
              return (
                <HeaderItem
                  key={index}
                  currentPath={path}
                  currentPage={PAGES[index]}
                  isActive={isActive}
                >
                  {isActive ? children : null}
                </HeaderItem>
              );
            })}
          </div>
        </nav>
      </header>
    );
  }
}

4. 优化HeaderItem，避免无意义重渲染 #

用React.memo包装HeaderItem，只有当props变化时才重新渲染：

import React, { memo } from 'react';
import { NavLink } from 'react-router-dom';

// 用memo缓存组件，减少不必要重绘
const HeaderItem = memo(({ isActive, currentPath, currentPage, children }) => {
  return (
    <div className={`nav__item ${isActive ? "_active" : ""}`}>
      <NavLink className="nav__link" exact activeClassName="_active" to={currentPath}>
        {currentPage}
      </NavLink>
      {/* 仅在激活时显示内容 */}
      {isActive && <div className="nav__content content">{children}</div>}
    </div>
  );
});

export { HeaderItem };

优化效果 #

修改后：

• Header组件只会初始化渲染一次，路由切换时仅更新状态，而非完全重绘
• 只有当前激活的HeaderItem会更新内容和样式，其他区块保持不动
• 路由切换时仅替换内容区域，不会刷新整个页面，达到局部更新的效果

内容的提问来源于stack exchange，提问作者g1un