React应用中Firebase认证刷新页面重定向问题的解决方案

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null); // 初始状态为 null

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

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

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

  return (
    <Routes>
      <Route
        path="/"
        element={!!currentUser ? <Landing /> : <Navigate to="/login" />} // currentUser为null时，立即重定向
        exact
      />
      <Route
        path="/login"
        element={!currentUser ? <Login /> : <Navigate to="/" />}
        exact
      />
    </Routes>
  )
}

// AuthProvider.js
import React, { useEffect, useState } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { FirebaseAuth } from "./firebase/config"; // 假设这是你的Firebase配置

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  // 将currentUser的初始状态设置为 undefined
  const [currentUser, setCurrentUser] = useState(); // <-- 初始值为 undefined

  useEffect(() => {
    // Firebase auth 状态监听
    const unsubscribe = onAuthStateChanged(FirebaseAuth, user => {
      if (user) {
        setCurrentUser(user); // 用户已登录
      } else {
        setCurrentUser(null); // 用户未登录
      }
    });
    // 清理函数，在组件卸载时取消订阅
    return () => unsubscribe();
  }, []);

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

// AppRouter.js
import { useContext } from "react";
import Landing from "./screens/Landing"; // 假设这是受保护的页面
import {
  Navigate,
  Routes,
  Route
} from "react-router-dom"; // BrowserRouter 通常在 index.js 中包裹
import Login from "./screens/auth/Login"; // 假设这是登录页面
import { AuthContext } from './AuthProvider';

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

  // 如果 currentUser 为 undefined，表示认证状态仍在加载中
  if (currentUser === undefined) {
    return null; // 或者返回一个加载指示器，例如 <LoadingSpinner />
  }

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

export default AppRouter;