React - перенаправление и рендеринг компонента с помощью props с реактивным маршрутизатором - PullRequest
Новая
       106

React - перенаправление и рендеринг компонента с помощью props с реактивным маршрутизатором

0 голосов
/ 05 августа 2020

У меня есть профиль functional component, я хочу, чтобы пользователи получали к нему доступ, только если они аутентифицированы, в противном случае они должны быть перенаправлены. 

import React from 'react';
import {useAuth0} from '@auth0/auth0-react';

export const Profile = ({history}) => {
  const {user, isAuthenticated} = useAuth0();

  if (!isAuthenticated) history.push('/');
  const {email, picture} = user;

  return (
    <div>
      <h4>Profile</h4>
      <p>{email}</p>
      <p>{picture}</p>
    </div>
  );
};

Здесь я получаю сообщение об ошибке, если пытаюсь получить доступ напрямую в / profile. 

`TypeError: Cannot destructure property 'email' of 'user' as it is` undefined.

Я хотел бы сделать следующее:

  • отобразить компонент Home, если пользователь не аутентифицирован, и передать логическое значение props .
  • перенаправить приложение на '/'

Я пытаюсь объединить history.push('/') и вернуть <Home message={true}/>, но это не работает, поскольку реквизиты не передаются.

Есть ли способ совместить и то, и другое? Или мне не хватает дополнительных шагов?

1 Ответ

0 голосов
/ 05 августа 2020

Код после history.push('/') вызывает ошибку, поскольку isauthenticated ложно, тогда пользовательский объект не содержит этих полей и, следовательно, ошибка! 

import React from 'react';
import {useAuth0} from '@auth0/auth0-react';

export const Profile = ({history}) => {
  const {user, isAuthenticated} = useAuth0();

  if(!isAuthenticated) {
     history.push('/');
     return
  }

  else{ 
    const {email, picture} = user;

    return (
      <div>
        <h4>Profile</h4>
        <p>{email}</p>
        <p>{picture}</p>
      </div>
    );
  }
};

Это должно работать !!

...