#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
ценности. Проверьте, является ли его значение нулевым/неопределенным.