Блог

Главная - Вопросы по программированию - перенаправление react-маршрутизатора ничего не отображает в защищенном маршруте

перенаправление react-маршрутизатора ничего не отображает в защищенном маршруте

#reactjs #react-router #react-router-dom

Вопрос:

У меня есть защищенный маршрут с именем <LoggedRoutes/> , который должен перенаправлять и отображать мой <Onboarding/> компонент, если пользователь не завершил свою адаптацию. Но компонент не отображается, в то время как мой <Login/> компонент отображается, если я не вошел в систему. Я не понимаю, почему. Обратите внимание, что перенаправление эффективно, потому /edit что, например, когда я пытаюсь попасть, меня перенаправляют на /onboarding .

Есть идеи, почему мой <Onboarding/> компонент не отображается ? Заранее спасибо! Ниже приведен код :

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

Заранее спасибо!

Комментарии:

1. Вы можете проверить, не вызывает ли он также какую-либо ошибку в консоли.

2. Ошибки нет :/

Ответ №1:

Не уверен, но попробуйте это:

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

Комментарии:

1. Спасибо. Я уже пробовал, и нет никакой разницы

2. можете ли вы поделиться своим кодом на stackblitz? чтобы я мог увидеть это в действии. @r10d

Ответ №2:

С помощью встроенного false жесткого кода , приведенное ниже утверждение выглядит следующим образом

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

и затем,

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

Так что это зависит только от currentUser ценности. Проверьте, является ли его значение нулевым/неопределенным.

Метки: