Reactjs 当我使用 Firebase Auth 在 React 中刷新主页时显示登录页面

我通过文档在我的应用程序中实现了Firebase身份验证.我有一个登录屏幕和一个登录屏幕，只有当你登录时才能访问.

出于某种原因，当我登录并刷新登录屏幕时，它会将我重定向到登录屏幕，然后再返回到登录屏幕.我费了好大劲才找到原因.

以下是一些可以帮助您解决问题的代码:

index.js(不包括进口和其他方面的东西)

root.render(
  <AuthProvider>
    <Router>
      <Toaster />
      <AppRouter />
    </Router>    
  </AuthProvider>    
);

AuthProvider.js个

import React, { useEffect, useState } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { FirebaseAuth } from "./firebase/config";

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    onAuthStateChanged(FirebaseAuth, user => {
      if (user) {
        setCurrentUser(user)
      } else {
        setCurrentUser(null)
      }
    })
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};

这是AppRouter.js美元

import { useContext } from "react";
import Landing from "./screens/Landing"
import {
  Navigate,
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
import Login from "./screens/auth/Login";
import { AuthContext } from './AuthProvider';

const AppRouter = () => {
  const { currentUser } = useContext(AuthContext);

  return (
    <Routes>
      <Route
        path="/"
        element={!!currentUser ? <Landing /> : <Navigate to="/login" />}
        exact
      />
      <Route
        path="/login"
        element={!currentUser ? <Login /> : <Navigate to="/" />}
        exact
      />
    </Routes>
  )
}

export default AppRouter;