React路由切换时如何避免整个项目重载？

问题根源在于你把Navigation侧边栏分别放在了AllInboxPage和FocusedPage内部，路由切换时这两个页面组件会被卸载再重新挂载，导致侧边栏也跟着重复渲染。要实现路由切换仅更新内容区域，需要把全局的侧边栏抽离到路由外层。

修改步骤： #

1. 重构App.js的布局结构
   把Navigation移到<Switch>外面，作为全局固定布局的一部分，这样它只会初始化渲染一次，不会随路由切换而重载：

<Router history={history}>
  {/* 全局侧边栏 - 只渲染一次 */}
  <div className='lefter'>
    <Navigation />
  </div>
  {/* 路由切换仅更新这个区域的内容 */}
  <Switch>
    <Route exact path="/AllInbox" component={AllInboxPage} />
    <Route exact path="/Focused" component={FocusedPage} />
  </Switch>
</Router>

2. 修改页面组件，移除重复的Navigation
   分别调整AllInboxPage和FocusedPage，只保留各自的页面核心内容：

AllInboxPage.js：

return (
  <div className='main-content'>
    {/* 这里放置AllInbox页面的具体内容 */}
  </div>
)

FocusedPage.js：

return (
  <div className='main-content'>
    {/* 这里放置Focused页面的具体内容 */}
  </div>
)

3. 优化Navigation的路由状态判断（可选）
   如果需要侧边菜单项根据当前路由高亮，可以用useLocation钩子获取当前路径，动态设置选中样式：

Navigation.js：

import { useLocation, useHistory } from 'react-router-dom';

function Navigation() {
  const location = useLocation();
  const history = useHistory();

  const handleNavigate = (path) => {
    history.push(path);
  };

  return (
    <div className='nav-menu'>
      <button 
        onClick={() => handleNavigate("/AllInbox")}
        className={location.pathname === "/AllInbox" ? 'active' : ''}
      >
        AllInbox
      </button>
      <button 
        onClick={() => handleNavigate("/Focused")}
        className={location.pathname === "/Focused" ? 'active' : ''}
      >
        Focused
      </button>
    </div>
  );
}

这样调整后，路由切换时只有<Switch>内部的内容组件会更新，侧边栏保持挂载状态，不会出现重载现象。

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