ReactJS中如何在Login组件中不渲染侧边导航栏

当前问题是侧边导航栏（Sidebar）包裹了所有路由，导致登录页也显示导航栏，下面提供两种可行的解决方式：

方式一：使用嵌套路由（推荐） #

这种方式符合React Router的设计规范，便于后续扩展更多页面：

1. 修改App.jsx，将登录路由单独拆分出来，其他需要显示Sidebar的路由作为Sidebar的子路由：

import Sidebar from './components/Sidebar'

function App() {
  return (
    <Router>
      <AuthProvider>
        <Routes>
          {/* 登录页不包裹Sidebar */}
          <Route path='/login' element={<Login />} />
          {/* 所有需要Sidebar的路由统一嵌套在Sidebar路由下 */}
          <Route path='/' element={<Sidebar />}>
            <Route index element={
              <Private>
                <Home />
              </Private>
            } />
            {/* 可在此添加其他需要显示Sidebar的页面路由 */}
          </Route>
        </Routes>
      </AuthProvider>
    </Router>
  )
}

export default App

2. 修改Sidebar.jsx，导入Outlet并替换原来的{children}，用来渲染嵌套的子路由：

import { Outlet } from 'react-router-dom'; // 新增导入

return (
<Box sx={{ display: 'flex' }}>
  <CssBaseline />
  <Drawer
    variant="permanent"
    anchor="left"
  >
    <List>
      {sectionList.map(({ name, icon, link }, index) => (
        <ListItem key={name} component={Link} to={link} disablePadding>
          <ListItemButton>
            <ListItemIcon>
              {icon}
            </ListItemIcon>
            <ListItemText primary={name}/>
          </ListItemButton>
        </ListItem>
      ))}
    </List>
  </Drawer>
  <Box
    component="main"
    sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
  >
    <Topbar />
    <Outlet /> {/* 替换原{children}为Outlet */}
  </Box>
</Box>
);

方式二：通过路由路径判断动态渲染 #

这种方式更直接，适合页面较少的简单场景：

修改App.jsx，使用useLocation获取当前路径，判断是否为登录页来决定是否渲染Sidebar：

import Sidebar from './components/Sidebar'
import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  const isLoginPage = location.pathname === '/login';

  return (
    <Router>
      <AuthProvider>
        {isLoginPage ? (
          <Routes>
            <Route path='/login' element={<Login />} />
          </Routes>
        ) : (
          <Sidebar>
            <Routes>
              <Route index element={
                <Private>
                  <Home />
                </Private>
              } />
              {/* 可在此添加其他需要显示Sidebar的页面路由 */}
            </Routes>
          </Sidebar>
        )}
      </AuthProvider>
    </Router>
  )
}

export default App

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