认证后渲染组件时反应页面闪烁答案

【问题标题】：React page flickers when rendering component after authentication认证后渲染组件时反应页面闪烁
【发布时间】：2020-10-31 12:38:08
【问题描述】：

我有一个PrivateRoute 组件，它包装了其他需要身份验证才能访问的组件。 PrivateRoute 调用一个检查身份验证的 API，同时在决定是否重定向用户是否通过身份验证之前显示一个 Loading 组件。

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

这里的理想流程是：

用户身份验证 => 重定向到 PrivateRoute => Loading 组件在 API 调用完成时呈现 => ComponentA 在用户刚刚通过身份验证时呈现

但是，我得到了类似的东西：

用户身份验证 => ComponentA 短暂呈现 => 重定向到 PrivateRoute => Loading 组件在 API 调用完成时呈现 => ComponentA 在用户刚刚通过身份验证时呈现

这会导致在成功验证后将呈现的任何内容（在本例中为ComponentA）短暂地显示给用户，然后再继续理想的流程。有没有人遇到过这样的问题？谢谢！

PrivateRoute 代码如下：

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

【问题讨论】：

标签： javascript reactjs firebase redux oauth

【解决方案1】：

所以我使用window.location.pathname 而不是history.push 重定向到PrivateRoute 组件，因为后者导致React 出现无限渲染循环错误。但是，这一次，使用history.push 并没有导致这个错误，并且也解决了我遇到的问题。

【讨论】：