React路由如何实现Sidebar仅在匹配path='/user/:name'时渲染一次

问题原因 #

你当前的写法将Sidebar和User组件都作为path='/user/:name'路由的直接子元素，当路由参数:name变化时，React Router 会触发该路由整个子树的重渲染，因此Sidebar会被重复渲染。

解决方法 #

方案1：调整为嵌套路由结构（推荐，适配 React Router v6）

将Sidebar抽离到父路由层，配合Outlet承载User组件的渲染，父路由仅会在首次匹配/user/:name时挂载一次，后续参数变化不会触发父路由重渲染，Sidebar自然不会重复渲染。
代码示例：

// 定义用户页公共布局组件
const UserLayout = () => {
  return (
    <div className="user-page-wrapper">
      <Sidebar />
      {/* Outlet 为子路由占位，仅该部分会随路由参数更新重渲染 */}
      <Outlet />
    </div>
  )
}

// 路由配置调整为如下结构
<Route exact path='/user' element={<UsersList />} />
<Route path='/user/:name' element={<UserLayout />}>
  <Route index element={<User />} />
</Route>

方案2：上层判断渲染+React.memo（适配 React Router v5）

把Sidebar提到路由外层，通过路由匹配规则控制显隐，同时用React.memo包裹组件避免不必要重渲染：

// 上层组件（如App.js）逻辑
import { useRouteMatch } from 'react-router-dom'

const App = () => {
  // 匹配/user/:name路由时返回对应匹配对象，否则为null
  const isUserDetailPage = useRouteMatch('/user/:name')

  return (
    <div className="app-wrapper">
      <Route exact path='/user' component={UsersList} />
      {/* 仅匹配用户详情页时渲染Sidebar */}
      {isUserDetailPage && <Sidebar />}
      <Route path='/user/:name' component={User} />
    </div>
  )
}

// Sidebar组件用React.memo包裹，props无变化则不重渲染
const Sidebar = React.memo(() => {
  // 组件内部如果需要获取当前用户名，直接调用useParams即可，无需从外部传参
  // const { name } = useParams()
  return <div>侧边栏内容</div>
})

注意事项 #

如果Sidebar需要依赖当前路由参数实现高亮等逻辑，不要将路由参数作为props传入Sidebar，直接在组件内部调用useParams获取即可，避免props变化触发不必要的重渲染。

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