如何在 React JS 渲染之前等待状态？

Question

我使用 'React Context' 将状态 user 传递给子组件。

问题：每次重新加载页面时，状态 user 值为空。这会导致页面在重定向到“/dashboard”之前短暂地重定向到 /login。这将阻止用户手动访问页面。

目标：渲染前如何等待状态user？

App.js

function App() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) setUser(user);
      else setUser(null);
    });
  }, []);
  return (
    <Router>
      <AuthDataContext.Provider value={user}>
        <Layout>
          <Routes />
        </Layout>
      </AuthDataContext.Provider>
    </Router>
  );
}

路线

export const Routes = () => {
  const user = useContext(AuthDataContext);
  if (user) {
    return (
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/list" component={List} />
        <Redirect to="/dashboard" />
      </Switch>
    );
  } else {
    return (
      <Switch>
        <Route path="/login" component={LogIn} />
        <Route path="/register" component={Register} />
        <Route path="/passwordreset" component={PasswordReset} />
        <Redirect to="/login" />
      </Switch>
    );
  }
};

授权数据

import React from "react";

export const AuthDataContext = React.createContext(null);

编辑：快速修复 App.js

const [user, setUser] = useState("first");

路线

else if (user === "first") return null

Answer 1

您可以让组件启动 API 调用并在用户等待响应时呈现某种加载程序。然后，如果用户通过身份验证，您可以呈现常规应用程序路由，如果没有 - 呈现 sign in、sign up 等的路由。

如何在 React JS 渲染之前等待状态？

How to wait state before rendering in React JS?

reactjs

react-router

react-context