如何使用React Router新增组件时不重新渲染已有前置组件

核心思路是避免将每个步骤组件配置为平级独立路由，平级路由切换时旧路由的组件会被卸载，新路由的所有组件都会重新挂载，自然会触发Step1的重渲染。用以下两种方案都可以实现需求：

方案1：嵌套路由（React Router v6 推荐） #

利用React Router的嵌套路由特性，把公共的Step1放在父路由组件中，子路由只负责渲染后续追加的步骤，父路由匹配时Step1不会随子路由切换重新挂载：

import { Routes, Route, Outlet } from 'react-router-dom'
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'

// 父路由组件，所有step路径都会复用这个组件
function StepLayout() {
  return (
    <div className="step-container">
      {/* Step1放在父层级，不会随子路由切换重新渲染 */}
      <Step1 />
      {/* 子路由对应的组件会渲染在Outlet位置 */}
      <Outlet />
    </div>
  )
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<StepLayout />}>
        {/* step-1路径下子路由无内容，仅展示Step1 */}
        <Route path="step-1" element={null} />
        {/* step-2路径追加Step2 */}
        <Route path="step-2" element={<Step2 />} />
        {/* step-3路径追加Step2和Step3 */}
        <Route path="step-3" element={
          <>
            <Step2 />
            <Step3 />
          </>
        } />
      </Route>
    </Routes>
  )
}

如果需要进一步避免Step1的非必要重渲染，可以用React.memo包裹Step1组件，只要它的props没有变化就不会触发重渲染：

const Step1 = React.memo(() => {
  // Step1的业务逻辑
  return <div>Step1内容</div>
})

方案2：路径判断直接渲染（更简单） #

直接在公共组件内读取当前路径，按路径判断要渲染的步骤，Step1始终渲染，自然不会被卸载重渲染：

import { useLocation } from 'react-router-dom'
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'

function App() {
  const { pathname } = useLocation()
  return (
    <div className="step-container">
      <Step1 />
      {pathname === '/step-2' || pathname === '/step-3' ? <Step2 /> : null}
      {pathname === '/step-3' ? <Step3 /> : null}
    </div>
  )
}

这种方案不需要调整路由配置，代码更简洁，完全满足你要求的渲染规则。

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