react-router 重定向在受保护的路由中不渲染任何内容

Question

我有一个名为<LoggedRoutes/> 的受保护路由，如果用户尚未完成他的引导，它应该重定向并呈现我的<Onboarding/> 组件。但是如果我没有登录，该组件不会呈现，而我的 <Login/> 组件正在呈现。我不明白为什么。请注意，重定向是有效的，因为例如当我尝试访问 /edit 时，我被重定向到 /onboarding。

任何想法为什么我的<Onboarding/> 组件没有呈现？提前致谢！下面是代码：

const LoggedRoutes = ({ component: RouteComponent, ...rest }) => {
    const { currentUser } = useContext(AuthContext);
    const onboarding = false;
    return (
        <Route
            {...rest}
            render={routeProps =>
                !!currentUser && onboarding ? (
                    <RouteComponent {...routeProps} />
                ) : !!currentUser && !onboarding ? (
                    <Redirect to={"/onboarding"} />
                ) : (
                    <Redirect to={"/login"} />
                )
            }
        />
    );
};

提前致谢！

Answer 1

将入职硬编码为false，下面的语句原来是这样的

currentUser && false  ? ( <RouteComponent {...routeProps} /> ) :
currentUser && true ? ( <Redirect to={"/onboarding"} /> ) :
                             ( <Redirect to={"/login"} /> )

然后，

false  ? ( <RouteComponent {...routeProps} /> ) :
currentUser  ? ( <Redirect to={"/onboarding"} /> ) :
                             ( <Redirect to={"/login"} /> )

所以它只取决于currentUser 值。检查其值是否为空/未定义。

Answer 2

不确定，但试试这个：

const LoggedRoutes = ({ component: RouteComponent, ...rest }) => {
    const { currentUser } = useContext(AuthContext);
    const onboarding = false;
    return (
        <Route
            {...rest}
            render = { routeProps => (
                           currentUser && onboarding ? ( <RouteComponent {...routeProps} /> ) :
                           currentUser && !onboarding ? ( <Redirect to={"/onboarding"} /> ) :
                           ( <Redirect to={"/login"} /> )
                    )}
        />
    );
};