Создать защищенный маршрут реакции

Question

Я создал компонент, который проверяет, вошел ли пользователь в систему, и если нет, он возвращается к маршруту '/ login'. При тестировании компонента он возвращает следующее сообщение:

Ошибка: объекты недопустимы как дочерний элемент React (найдено: [обещание объекта]). Если вы намеревались отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Это мой маршрут

<Route exact path="/protected" render={ProtectedRoute}/>

защищенный компонент

const ProtectedRoute = ( props ) =>
{
  return Sesion.IsUserLogged(props)
    .then( res =>
        {
        if(res)
        return <Redirect to="/login" />
        else
        return <h2>This is my protected route</h2>
        })
}

// Sesion script
class Session 
{
  IsUserLogged() 
  {
    let cookie = this.GetSessionCookie();

    if( cookie === undefined)
      return false;

    return this.ValidateUserSession(cookie);
  }


  ValidateUserSession(cookie)
  {

    return axios.post("http://localhost:3535/api/auth/validate", cookie)
      .then( function (res) 
          {
          return true;
          })
    .catch( function(err)
        {
        this.RemoveSessionCookies( );
        return false
        })
  }

  GetUserInfo()
  {  

    let cookie = this.GetSessionCookie();
    return axios.get(`http://localhost:3535/api/usrinfo/${cookie.UserID}`)
      .then( function (res) 
          {
          return res.data;
          })
    .catch( function(err)
        {
        if (err.response) 
        {
        return undefined;
        }
        })

  }

  RemoveSessionCookies( )
  {
    let COOKIE_NAME = Config.SesionCookieName;
    const cookie = new Cookies();
    cookie.remove(COOKIE_NAME);
  }

  GetSessionCookie()
  {
    let COOKIE_NAME = Config.SesionCookieName;
    const cookie = new Cookies();
    return cookie.get(COOKIE_NAME);
  }
}

Хорошо Кто-нибудь может мне помочь?

Answer 1

Я думаю, вы можете попробовать это:

const ProtectedRoute = ( props ) => {
 const [isLogged, setIsLogged] = React.useState(false);
 const [isInitialized, setIsInitialized] = React.useState(false);



React.useEffect(() => { 
    if(!Sesion.IsUserLogged) {
        setIsLogged(false)
        setIsInitialized(true);
    }


    Sesion.IsUserLogged(props).then( res => {
        setIsLogged(!!res)
        setIsInitialized(true);
    });

    return () => {}
});

if(!isInitialized) {
    return null;
}

if(!isLogged) {
    return <Redirect to="/login" />
}

return (<h2>This is my protected route</h2>)
}