重定向不重定向到主页，而是重定向到使用 redux 的设置页面

Question

我想在 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 操作完成后，公司变量具有值，但它被重定向到设置页面而不是主页或仪表板。

Answer 1

初始渲染上的组件没有定义公司字段。因此，这将转到执行重定向的代码路径，甚至在获取公司详细信息之前。

即使公司详细信息已完成，页面已被重定向。处理此问题的方法之一是

假设detailsCompany() 是这样的

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

如果这个函数返回一个已解决的promise，那么useEffect可以重写为

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" />
  )}

}

如果状态重定向为 false，则不会执行第二部分。