Блог

Я хочу перенаправить домашнюю страницу на страницу настройки после завершения действия redux. App.js Код-это

 const companyDetails = useSelector((state) => state.companyDetails);
const { loading, error, company } = companyDetails;
useEffect(() => {
  if (!company) {
    dispatch(detailsCompany());
  }
}, [dispatch, company]);
return loading ? (
  <LoadingBox></LoadingBox>
  ) : error ? (
  <MessageBox variant="success">{error}</MessageBox>
  ) : (
  ...otherRoutes
   <Route path="/" exact>
      {company ? (
        userInfo?.isAdmin ? (
          <DashboardScreen />
        ) : (
          <HomeScreen />
        )
      ) : (
        <Redirect to="/setup" />
      )}
    </Route>
)
 

После завершения действия redux переменная компании имеет значение, но она перенаправляется на страницу настройки вместо домашней страницы или панели мониторинга.

Компонент на начальном рендеринге не имеет определенного поля компании. Таким образом, это приведет к пути кода, который выполняет перенаправление еще до того, как будут получены сведения о компании.

Даже если информация о компании завершена, страница уже перенаправлена.Одним из способов справиться с этим является

Предполагая, что это что detailsCompany() -то вроде этого

 function detailsCompany(){
  return dispatch=>{
    return someApi.getCompanyDetails().then(()=>{//do something})
                                      .catch(()=>{//do something})
}
 

Эта функция, если она возвращает разрешенное обещание, то эффект использования может быть переписан как

 useEffect(() => {
  if (!company) {
    dispatch(detailsCompany()).then(()=>{//do what is needed})
                              .catch(performRedirect)
  }
}, [dispatch, company]);
 

Это гарантирует, что если данные компании не удастся получить, произойдет перенаправление.

Для выполнения перенаправления может быть сохранено отдельное состояние, например

 const [redirect,setRedirect] = useState(false);
 

Таким образом, функция выполнения перенаправления будет выглядеть так

 const performRedirect = ()=>setRedirect(true)
 

Тег redirect should следует использовать в зависимости от значения этого состояния

  {!redirect?(company ? (
    userInfo?.isAdmin ? (
      <DashboardScreen />
    ) : (
      <HomeScreen />
    )
  )):(
    <Redirect to="/setup" />
  )}
 

}

если перенаправление состояния является ложным, вторая часть не будет выполнена.