Javascript 验证后呈现组件时，“反应”页面闪烁

我有一个

PrivateRoute

组件，它封装了需要身份验证才能访问的其他组件

PrivateRoute

调用检查身份验证的API，同时，在决定是否重定向用户是否经过身份验证之前，显示一个加载的

组件

当用户最初通过Google OAuth登录时，我想显示受
PrivateRoute
保护的
ComponentA

这里的理想流程是：

用户身份验证=>重定向到
PrivateRoute
=>
加载
组件呈现，而API调用完成=>
组件a
呈现为用户刚刚身份验证

然而，我得到的结果是：

用户身份验证=>
ComponentA
短暂呈现=>重定向到
PrivateRoute
=>
加载
组件呈现，而API调用完成=>
ComponentA
呈现为用户刚刚身份验证

这会导致在成功身份验证后（在本例中为组件a）将要呈现的内容在继续理想流程之前短暂地显示给用户。以前有人遇到过这样的问题吗？谢谢

privaterote
以下代码：

import { useSelector } from "react-redux";
import { isLoaded, isEmpty } from "react-redux-firebase";
import Loading from './Auth/Loading'
import get from "lodash/get";

const Private = ({ component: Component, ...rest }) => {
  const auth = useSelector(state => state.firebase.auth)
  const pathname = get(rest, "location.state.from.pathname");
  return (
    <Route
      {...rest}
      render={(props) => 
        isLoaded(auth) ? (
          !isEmpty(auth) ? (
            <Component {...props} {...rest} oldPath={pathname} />
          ) : (
            <Redirect
              to={{
                pathname: pathname || "/",
                state: { from: props.location },
              }}
            />
          )
        ) : (
          <Loading />
        )
      }
    />
  );
};

从“react redux”导入{useSelector}；
从“react-redux firebase”导入{isLoaded，isEmpty}；
从“./Auth/Loading”导入加载
从“lodash/get”导入get；
常量Private=（{component:component，…rest}）=>{
const auth=useSelector（state=>state.firebase.auth）
const pathname=get（rest，“location.state.from.pathname”）；
返回(
是否已加载（验证）(
！isEmpty（授权）(
) : (
)
) : (
)
}
/>
);
};
因此，我使用
window.location.pathname
而不是
history.push
重定向到
PrivateRoute
组件，因为后者导致React出现无限渲染循环错误。但是，这一次，使用
history.push
并没有导致此错误，并且修复了我的问题