Javascript 有没有办法在解决身份验证状态之前停止加载react应用程序？

我正在加载一个react应用程序，该应用程序有一个根组件app.js，用于确定通过中心redux商店是否存在经过身份验证的用户，但问题是需要几分之一秒的时间来解决。在此之前，即使用户已登录，用户也会获得登录页面的闪光，我确信这会被视为糟糕的用户体验。有没有办法在状态解决之前不显示任何内容。我正在附加一个代码片段

function App(props) {
  const cookies = new Cookies();
  const { user } = props;
  if (cookies.get("authToken") === "null" || cookies.get("authToken") === undefined) {
    //console.log("no valid token");
  } else {
    if (user === null) {
      props.fetchLoggedInUser(cookies.get("authToken"));
    }
  }

  const isLoggedIn = user ? (
    <div className="App s12 l12 m12">
      <Navbar user={user}/>
      <Switch>
        <Route exact path="/" component={() => (<Home user={user} />)}></Route>
        <Route exact path="/create_blog" component={() => (<CreateBlog user={user} />)}></Route>
        <Route exact path="/edit_profile" component={() => (<EditProfile user={user} />)}></Route>
      </Switch>
    </div>
  ) : (
    <div className="App">
      <Navbar user={null}/>
      <Switch>
        <Route exact path="/" component={() => (<Home user={null} />)}></Route>
        <Route exact path="/log_in" component={LogIn}></Route>
        <Route exact path="/sign_up" component={SignUp}></Route>
      </Switch>
    </div>
  );

  return (
    <BrowserRouter>
      {isLoggedIn}
    </BrowserRouter>
  );
}

const mapStateToProps = (state) => {
  return {
      authError: state.auth.authError,
      token: state.auth.token,
      user: state.auth.user
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    fetchLoggedInUser: (token) => dispatch(fetchLoggedInUser(token))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

功能应用程序（道具）{
const cookies=新cookies（）；
const{user}=props；
if（cookies.get（“authToken”）==“null”| | cookies.get（“authToken”）==未定义）{
//console.log（“无有效令牌”）；
}否则{
如果（用户===null）{
props.fetchLoggedInUser（cookies.get（“authToken”）；
}
}
const isLoggedIn=用户(
()}>
()}>
()}>
) : (
()}>
);
返回(
{isLoggedIn}
);
}
常量mapStateToProps=（状态）=>{
返回{
authError:state.auth.authError，
令牌：state.auth.token，
用户：state.auth.user
}
}
const mapDispatchToProps=（调度）=>{
返回{
fetchLoggedInUser：（令牌）=>dispatch（fetchLoggedInUser（令牌））
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

创建一个状态变量isLoading（或使用您想要的ay名称）。将其初始值设置为true

if (isLoading) {
    return '';
} else {
  return (
  <BrowserRouter>
    {isLoggedIn}
  </BrowserRouter>
 );
}

if（正在加载）{
返回“”；
}否则{
返回(
{isLoggedIn}
);
}

---

一旦获得isLoggedIn的值，您可以将isLoading设置为false，然后react将重新加载。

应该有多种方法来实现这一点。您可以尝试将此部分包装到另一个组件中，该组件在发送身份验证请求时不会呈现任何内容（或任何您想要的内容）。一旦您获得授权，您将加载另一个组件。只需使用第三个“中间”状态，该状态既不是经过身份验证的，也不是未经身份验证的，并且在准备就绪之前有条件地呈现null。创建一个

PrivateRoute

组件，检查redux存储中的身份验证状态，以了解用户有权访问哪些内容，这样会更干净。对于像

Home

这样的组件，它们还可以从redux状态检查当前用户。仅供参考，你真的不应该做

component={（）=>（）}

，因为这会在每次父组件重新渲染时创建一个新组件，请使用

render

prop，即

render={（）=>（）}

，这就是它的用途。哦，感谢您的快速回答。现在听起来很明显。