react-router v5如何避免Home重渲染仅更新Main并配置公有/私有路由

核心问题原因 #

你之前的写法在两个路由规则下都返回了新的<Home/>实例，路由切换时会触发旧<Home/>卸载、新<Home/>挂载，所以导致整个Home组件包括Sidebar全部重渲染。

实现步骤 #

1. 调整顶层App路由配置 #

修改顶层Switch逻辑，保证所有使用Home布局的路由仅渲染同一个<Home/>实例，避免重复挂载：

// App.jsx 顶层路由
<Switch>
  {/* 匹配所有使用Home布局的路径，Home仅实例化一次 */}
  <Route path={["/", "/folder"]} component={Home} />
  {/* 其他不需要Home布局的路由，比如登录页，单独配置 */}
  <Route path="/login" component={Login} />
</Switch>

2. 保留原Home组件结构 #

你的原有Home结构不需要修改，保持如下即可：

// Home.jsx
const Home = () => {
  return (
    <Home>
      { auth.user && <Sidebar /> }
      <Main />
    </Home>
  )
}

3. 将路由匹配逻辑移入Main组件内部 #

在Main组件内写Switch规则，私有路由直接使用你原有封装的PrivateRoute即可，此时路由切换仅会更新Main内部的匹配内容：

// Main.jsx
const Main = () => {
  return (
    <div className="main-container">
      <Switch>
        {/* 公共路由 */}
        <Route exact path="/" component={PublicIndexContent} />
        {/* 私有路由，沿用你原有PrivateRoute逻辑 */}
        <PrivateRoute path="/folder/:topicId" component={FolderContent} />
        {/* 可选：404兜底路由 */}
        <Route component={NotFound} />
      </Switch>
    </div>
  )
}

可选优化 #

如果Home组件存在额外props可能触发不必要重渲染，可以给Home组件包裹React.memo做浅层比较，进一步避免无效重渲染：

export default React.memo(Home)

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