react-router受保护路由Redirect后<Onboarding/>组件无法渲染问题

安全阿岳

2026-9-29

问题根因

核心问题：/onboarding 路由被配置为使用 <LoggedRoutes/> 保护的路由，触发无限重定向逻辑
现有代码规则下，只要用户已登录且onboarding为false，就会重定向到/onboarding；如果/onboarding本身走LoggedRoutes校验，会再次命中同一条重定向规则，陷入循环跳转，组件自然无法正常渲染。
次要问题：代码中的onboarding变量是硬编码的固定值false，没有从用户状态中读取实际的引导流程完成状态，不符合业务逻辑需求。

修复方案

将/onboarding路由改为公开路由，不要用<LoggedRoutes/>包裹，直接用普通Route声明即可：

<Route path="/onboarding" component={Onboarding}/>

修正onboarding变量的取值逻辑，从用户信息中读取实际状态，不要硬编码：

const LoggedRoutes = ({ component: RouteComponent, ...rest }) => {
    const { currentUser } = useContext(AuthContext);
    // 示例：从currentUser中读取onboarding完成状态，可根据实际业务字段调整
    const isOnboardingCompleted = currentUser?.onboardingCompleted ?? false;
    return (
        <Route
            {...rest}
            render={routeProps =>
                !!currentUser && isOnboardingCompleted ? (
                    <RouteComponent {...routeProps} />
                ) : !!currentUser && !isOnboardingCompleted ? (
                    <Redirect to={"/onboarding"} />
                ) : (
                    <Redirect to={"/login"} />
                )
            }
        />
    );
};