перенаправление на компонент маршрута на основе ответа API - реагирует маршрутизатор

Question

всякий раз, когда я загружаю корневой URL-адрес, загружаю домашний компонент, мне нужно проверить, установлен ли cookie на основе API.

<Route path="/" render ={() => {
  // checking the cookie exists
if(cookieExists){
  return (<HomePage />)
}else{
  axios.get("api/userLoggedIn")
     .then(res => {
          // the url is an external url [https://www.examplelogin.com]
          return(<div>Redirecting</div>
          {window.location.assign(res.data)}
          )
      })
      .catch(err => console.log("error in api", err))
}
}}
/>

ошибка, которую я получаю, это - ничего не было возвращено от рендера в компоненте Route

Answer 1

Вы должны вернуть <div>Redirecting</div> синхронно.

<Route path="/" render ={() => {
  // checking the cookie exists
if(cookieExists){
  return (<HomePage />)
}else{
  axios.get("api/userLoggedIn")
     .then(res => {
          // the url is an external url [https://www.examplelogin.com]
          window.location.assign(res.data);
      })
      .catch(err => console.log("error in api", err))
  return <div>Redirecting</div>;
}
}}
/>

Вызов axios происходит асинхронно, и его ответ обрабатывается после того, как перенаправляющий элемент возвращается в маршрутизатор.