Как правильно перенаправить на страницу входа с помощью React - PullRequest
Новая
       28

Как правильно перенаправить на страницу входа с помощью React

0 голосов
/ 16 апреля 2020

У меня следующее (избыточное) состояние: 

{
  authentication: user
}

При выходе из системы user устанавливается на null.

У меня есть следующие компоненты: 

const Dashboard = ({ authentication }) => {

  if (!authentication.user) {
    return <Redirect to={"/login"} />
  }

  return (
    <SomeInnerComponent />
  );
}

const SomeInnerComponent = ({ authentication }) => {

  const name = authentication.user.name;

  return (
    <h1>Hello, {name}</h1>
  )
}

authentication отображается с использованием connect и mapStateToProps. Я думаю, что когда я выйду из системы, я буду перенаправлен, но вместо этого получаю сообщение об ошибке: authentication.user is null.

Почему if заявление в Dashboard не перенаправляет меня? Я также попытался обернуть его в useEffect с authentication в качестве зависимости.

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

Я исправил это, написав собственный хук: 

export function useAuthentication() {

  const history = useHistory();
  const user = useSelector(state => state.authentication.user);
  const dispatch = useDispatch();

  useEffect(() => {
    if (!user) {
      history.push(LOGIN);
  });

  return { user };
}

, который затем можно вызывать в моих компонентах React следующим образом: 

const Dashboard = () => {
  const { user } = useAuthentication();

  return (
    // My code
  );
}
0 голосов
/ 16 апреля 2020

В нашем приложении мы перенаправляем неаутентифицированных пользователей по history.replace исторические документы или вы снова читаете документы, возможно, вы найдете ошибку в своем коде acttraining

...