react-router redirect render nothing in protected route

Question

I have protected route named <LoggedRoutes/> that should redirect and render my <Onboarding/> component if the user has not completed his onboarding. But the component is not rendering whereas my <Login/> component is rendering if I'm not logged. I don't get why. Note that the redirect is effective because when I try to get to /edit for example, I'm redirected to /onboarding.

Any ideas why my <Onboarding/> component is not rendering ? Thanks in advance! Below is the code :

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"} />
                )
            }
        />
    );
};

Thanks in advance!

Can you check if it throws any error in console also. – fatalcoder524 Oct 18 '21 at 06:11 — fatalcoder524, Oct 18 '21 at 06:11

score 0 · Answer 1 · answered Oct 18 '21 at 06:10

0

Not sure but try this:

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"} /> )
                    )}
        />
    );
};

answered Oct 18 '21 at 06:10

fatalcoder524

1,428
1
7
16

Thank you. I already tried and there is no difference – r10d Oct 18 '21 at 06:27
can you share your code on stackblitz? so that I can see it in action. @r10d – fatalcoder524 Oct 18 '21 at 06:51

score 0 · Answer 2 · answered Oct 18 '21 at 07:07

With onboarding hardcoded to false, The below statement turns out to be like this

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

and then,

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

So it only depends on currentUser value. Check whether its value is null/undefined.

react-router redirect render nothing in protected route

2 Answers2