React登录后按用户角色跳转路由及白屏问题解决

白屏问题由三个核心错误导致：

• 路由配置不全且路径不匹配：现有路由表只声明了/student、/teacher、/principal、/accounts4个业务路由，跳转逻辑里用到的/class_teacher、/account、/admin、/master都没有对应Route规则，匹配失败后会触发末尾的重定向规则跳回登录页；另外账号角色对应的跳转路径写的是/account，路由里配的是/accounts，单复数不一致直接导致匹配失败。
• 跳转逻辑存在冗余错误：React Router是客户端路由方案，调用props.history.push后已经完成路由切换，不需要额外执行window.location.reload()。强制整页刷新会打断React的状态同步，如果你没有对登录态做持久化存储，刷新后内存里的用户信息会直接丢失，触发组件渲染异常。
• 角色取值逻辑有隐患：直接取currentUser.roles[0]默认用户只有一个角色，一旦后端返回的角色数组顺序调整，会直接跳错落地页。

1. 补全并对齐路由配置 #

把缺失的角色路由全部补上，统一路径拼写，和后续跳转逻辑保持完全一致：

<MenuState>
    <Router>
      <Switch>
        <Route exact path="/" component={Login} />
        <Route exact path="/register" component={Register} />
        <Route exact path="/forgot" component={ForgotPassword} />
        <Route exact path="/student" component={Student} />
        <Route exact path="/teacher" component={TeacherLayout} />
        {/* 补全班主任路由 */}
        <Route exact path="/class_teacher" component={ClassTeacherLayout} />
        <Route exact path="/principal" component={PrincipalLayout} />
        {/* 统一账号模块路径为/account，和跳转逻辑对齐 */}
        <Route exact path="/account" component={AccountsLayout} />
        {/* 补全管理员路由 */}
        <Route exact path="/admin" component={AdminLayout} />
        {/* 补全超级管理员路由 */}
        <Route exact path="/master" component={MasterLayout} />
        <Redirect to="/" />
      </Switch>
    </Router>
</MenuState>

注意：代码里的ClassTeacherLayout、AdminLayout、MasterLayout替换成你项目中对应角色实际使用的页面/布局组件即可。

2. 重构跳转逻辑 #

去掉冗余的强制刷新，用映射表替代冗长的if-else判断，同时优化角色匹配逻辑，避免数组顺序导致的跳转错误：

// 角色-路由映射表，后续新增角色直接在这里加配置即可，不需要写重复判断
const rolePathMap = {
  ROLE_STUDENT: "/student",
  ROLE_TEACHER: "/teacher",
  ROLE_CLASS_TEACHER: "/class_teacher",
  ROLE_PRINCIPAL: "/principal",
  ROLE_ACCOUNT: "/account",
  ROLE_ADMIN: "/admin",
  ROLE_MASTER: "/master"
}

// 登录请求回调里的跳转逻辑
.then(() => {
    const userRoles = currentUser.roles || [];
    // 匹配用户拥有的第一个有效角色对应的路由
    const matchedRole = userRoles.find(role => rolePathMap[role]);
    const targetPath = matchedRole ? rolePathMap[matchedRole] : "/";
    // 执行跳转，不要调用window.location.reload()
    props.history.push(targetPath);
  })

如果你用的是React Router v6及以上版本，props.history.pushAPI已经被移除，需要用useNavigate钩子获取跳转方法：const navigate = useNavigate(); navigate(targetPath)。

3. 额外排查点 #

• 登录态需要做持久化存储（localStorage/sessionStorage/全局状态持久化插件），即使用户手动刷新页面也能拿到登录信息，避免组件因为拿不到用户信息渲染失败。
• 打开浏览器控制台查看具体报错，如果有组件语法错误、资源加载404、权限拦截逻辑错误，对应修复即可。

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