Reactjs 如何在React JS中呈现前等待状态？

我使用“反应上下文”将状态

user

传递给子组件

问题是：每次重新加载页面时，state

user

值都为null。这会导致页面在重定向到“/dashboard”之前短暂重定向到

/login

。这将阻止用户手动访问页面

目标：如何在渲染之前等待state

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

编辑：快速修复 App.js

路线

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

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

---

您可以使用一个组件来启动API调用，并在用户等待响应时呈现某种加载程序。然后，如果用户经过身份验证，则可以呈现常规应用程序路由，如果没有，则可以呈现

登录

、

注册

等的路由。

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

登录

、

注册

等的路由。

我明白了，这是个好主意。我应用了一个快速修复方法，现在state

user

有3个可能值

firebase用户数据、null或first

。如果我没有错，如果我添加加载条，这将导致

routes

有3种可能的返回？对不起，我学习很慢，这是我第四天的反应，大约120天的编程。这和我的意思差不多。但是，您的状态数据结构可以更精确一些，至少您可以存储一个用户本身，该用户本身可能会在您请求它时丢失，以及请求状态（如挂起或失败），这样您就可以轻松地决定渲染、路由甚至错误消息。但总的来说，我知道你理解我的想法。我知道，好主意。我应用了一个快速修复方法，现在state

user

有3个可能值

firebase用户数据、null或first

。如果我没有错，如果我添加加载条，这将导致

routes

有3种可能的返回？对不起，我学习很慢，这是我第四天的反应，大约120天的编程。这和我的意思差不多。但是，您的状态数据结构可以更精确一些，至少您可以存储一个用户本身，该用户本身可能会在您请求它时丢失，以及请求状态（如挂起或失败），这样您就可以轻松地决定渲染、路由甚至错误消息。但总的来说，我看你明白我的想法。

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

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