React中如何配置登录后侧边栏导航的Routes路由保持侧边栏常驻？

问题核心原因 #

1. 重复声明Router实例：整个React应用仅需在App.js层声明一个Router即可，HomePage内额外声明的Router会导致两个路由实例逻辑不同步，跳转失效。
2. 顶层路由exact规则错误：你给path="/"的PrivateRoute添加了exact完全匹配属性，当访问/archived、/profile这类路径时，顶层Switch匹配不到完全相等的/路径，会触发全局重定向回到/，HomePage都不会渲染，自然侧边栏消失。

修复方案 #

第一步：修改App.js上层路由

删除/路径的exact属性，调整路由顺序确保登录/注册路径优先匹配：

return (
    <div>
      <Router history={history}>
        <Switch>
          <Route path="/login" component={LoginPage} />
          <Route path="/register" component={RegisterPage} />
          {/* 去掉exact，所有非登录/注册的私有路径都会渲染HomePage */}
          <PrivateRoute path="/" component={HomePage} />
          <Redirect from="*" to="/" />
        </Switch>
      </Router>
    </div>
  );

第二步：修改HomePage.jsx内层路由

删除内层的Router声明，给根路径的Dashboard路由添加exact属性避免匹配冲突：

return (
    <div style={{ display: 'flex' }}>
      <Sidebar />
      {/* 内容区域可自定义样式占满剩余宽度 */}
      <div className="content-wrapper">
        <Switch>
          <Route exact path="/" component={Dashboard} />
          <Route path="/archived" component={ArchivedPage} />
          <Route path="/profile" component={ProfilePage} />
          <Route path="/settings" component={SettingsPage} />
        </Switch>
      </div>
    </div>
);

额外注意 #

Sidebar内的跳转链接必须使用react-router-dom提供的Link组件，不要使用原生<a>标签，否则会触发页面全量刷新，导致侧边栏消失。

如果希望路由结构更规范，也可以给所有登录后页面统一添加/dashboard前缀（比如/dashboard/archived），避免私有路径和公共路径冲突。

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