React项目登录后如何跳转至带侧边栏的指定首页

侧边栏丢失的核心原因是路由嵌套关系配置错误：你把/student/home注册成了和/student平级的顶层路由，访问该路径时不会渲染作为父级容器的StudentLayout组件，常驻在布局里的侧边栏自然不会显示。
按以下步骤修改即可：

1. 调整根路由嵌套结构 #

所有学生端业务路由必须作为StudentLayout的子路由挂载，不要把业务路由和布局路由设为平级，同时给父级路由配置默认重定向规则：

// App.js 根路由配置
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
import Login from './pages/Login'
import StudentLayout from './layouts/StudentLayout'
import StudentHome from './pages/student/StudentHome'
import StudentCourse from './pages/student/StudentCourse'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        {/* 学生端父级路由：匹配所有/student开头的路径，统一渲染带侧边栏的布局 */}
        <Route path="/student" element={<StudentLayout />}>
          {/* index路由：访问/student时自动重定向到home子路由，replace避免留下历史记录 */}
          <Route index element={<Navigate to="home" replace />} />
          {/* 所有学生端子路由全部挂在这里，不要放到外层 */}
          <Route path="home" element={<StudentHome />} />
          <Route path="course" element={<StudentCourse />} />
          <Route path="*" element={<Navigate to="home" replace />} />
        </Route>
        {/* 其他角色路由按相同逻辑配置即可 */}
        <Route path="*" element={<Navigate to="/login" replace />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

如果你之前单独抽离了Routes.js维护子路由，直接把学生端子路由数组作为/student路由的children传入即可，不要单独注册/student/home这类完整路径的顶层路由。

2. 确认布局组件的路由出口配置 #

StudentLayout组件必须引入Outlet作为子页面的渲染容器，侧边栏要写在Outlet外层，保证匹配所有/student下的子路由时侧边栏都会常驻：

// layouts/StudentLayout.jsx
import { Outlet } from 'react-router-dom'
import StudentSidebar from './StudentSidebar'

export default function StudentLayout() {
  return (
    <div className="flex h-screen">
      {/* 侧边栏写在Outlet外层，所有子路由下都会显示 */}
      <StudentSidebar className="w-64 shrink-0" />
      <main className="flex-1 overflow-auto p-6">
        {/* 子路由页面（包括home页）只会渲染在Outlet位置，不会替换侧边栏 */}
        <Outlet />
      </main>
    </div>
  )
}

3. 简化登录页跳转逻辑 #

登录校验通过后，不需要硬编码跳转到/student/home，直接跳转到对应角色的根路由/student即可，路由层配置的index重定向规则会自动跳转到home页，后续如果要调整默认首页，只需要修改路由配置，不需要改动登录逻辑：

// 登录成功逻辑片段
if (loginRes.code === 0) {
  localStorage.setItem('userInfo', JSON.stringify(loginRes.data))
  const { role } = loginRes.data
  // 跳转到角色根路由即可
  navigate(`/${role}`, { replace: true })
}

排查要点：出现布局丢失问题时，先检查出问题的路径对应的路由是不是被注册成了顶层路由，没有嵌套在对应布局组件的子路由下，这类问题90%以上都是路由嵌套层级写错导致的。

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