React路由问题：如何在登录页面隐藏Sidebar（Navbar）？求助

你的代码核心问题是使用了两个独立的<Router>实例，这会导致路由状态不互通，第二个Router中的Sidebar会始终渲染，不受当前路由路径的影响。另外，你把Login路由和其他路由拆在两个Router里的做法完全没必要，反而引发了布局问题。

修改方案 #

只保留一个Router，通过嵌套路由区分需要显示Sidebar的页面和不需要的页面（比如Login）。具体步骤：

1. 封装带Sidebar的布局组件，用Outlet承载子页面内容；
2. 将需要显示Sidebar的路由嵌套在布局路由下；
3. Login路由单独放在外层，不纳入布局范围。

修改后的完整代码 #

import './App.css';
import Sidebar from '../src/Components/Sidebar';
import { BrowserRouter as Router, Route, Routes, Outlet } from 'react-router-dom';
import Overview from '../src/Components/pages/Overview';
import { Reports, ReportsOne, ReportsTwo, ReportsThree } from '../src/Components/pages/Reports';
import Team from '../src/Components/pages/Team';
import Maps from './Components/Maps';
import Login from './Components/Login';

// 带Sidebar的主布局组件
const MainLayout = () => {
  return (
    <div className="main-layout">
      <Sidebar />
      <Outlet /> {/* 渲染嵌套的子路由组件 */}
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          {/* 登录页面，不显示Sidebar */}
          <Route path='/login' element={<Login/>} />
          
          {/* 所有需要显示Sidebar的页面，嵌套在MainLayout下 */}
          <Route path='/' element={<MainLayout/>}>
            <Route path='/overview' element={<Overview/>} />
            <Route path='/reports' element={<Reports/>} />
            <Route path='/reports/reports1' element={<ReportsOne/>} />
            <Route path='/reports/reports2' element={<ReportsTwo/>} />
            <Route path='/reports/reports3' element={<ReportsThree/>} />
            <Route path='/team' element={<Team/>} />
            <Route path='/maps' element={<Maps/>} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

关键说明 #

• 仅保留一个<Router>，确保整个应用路由状态统一；
• MainLayout组件封装了Sidebar和Outlet，只有访问嵌套子路由时，Sidebar才会渲染；
• Login路由独立于布局之外，访问/login时仅渲染Login组件，不会加载Sidebar。

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