React受保护页面刷新时出现闪烁/Glitch故障：条件渲染问题求助

问题原因 #

页面刷新时，Firebase的onAuthStateChanged是异步执行的，在auth状态完成初始化前，你的ProtectedRoute会直接判断!auth.currentUser并显示"You need to sign in"提示，等auth状态加载完成后才会渲染受保护的RestrictedZone组件，这就导致了闪烁现象。

修复方案 #

1. 完善AuthContext，添加加载状态 #

修改AuthContext.js，增加isLoading状态标记auth初始化是否完成，同时修正user初始值为null（更准确反映未登录状态）：

import { createContext, useContext, useEffect, useState } from 'react'
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged
} from "firebase/auth"
import { auth } from "../firebase"

const UserContext = createContext()

export const AuthContextProvider = ({children})  => {
  // 初始化为null，明确未登录状态
  const [user, setUser] = useState(null)
  // 添加加载状态，标记auth是否初始化完成
  const [isLoading, setIsLoading] = useState(true)

  const createUser = (email, password) => {
    return createUserWithEmailAndPassword(auth, email, password)
  }

  const signIn = (email, password) => {
    return signInWithEmailAndPassword(auth, email, password)
  }

  const logout = () => {
    return signOut(auth)
  }

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser)
      // auth状态获取完成，结束加载
      setIsLoading(false)
    })
    return () => {
      unsubscribe()
    }
  }, [])

  return (
    <UserContext.Provider value={{createUser, user, auth, logout, signIn, isLoading}}>
      {children}
    </UserContext.Provider>
  )
}

export const UserAuth = () => {
  return useContext(UserContext)
}

2. 修改ProtectedRoute，优先处理加载状态 #

更新ProtectedRoute.js，先判断加载状态，加载中时显示加载组件（可替换为项目内的加载动画），避免过早渲染登录提示或目标页面：

import React from "react";
import { UserAuth } from "../context/AuthContext"

const ProtectedRoute = ({ children }) => {
  const { user, isLoading } = UserAuth()

  // 加载中时显示加载组件，可替换为自定义加载动画
  if (isLoading) {
    return <div>Loading...</div>
  }

  if (!user) {
    return (
      <>
        <p>You need to sign in</p>
      </>
    )
  }
  return children
}

export default ProtectedRoute;

3. 确认AuthContextProvider的包裹范围 #

保证AuthContextProvider包裹了所有路由组件，确保状态能全局访问（示例App.js结构）：

import { AuthContextProvider } from './context/AuthContext';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import RestrictedZone from './components/RestrictedZone';
import ProtectedRoute from './components/ProtectedRoute';

function App() {
  return (
    <AuthContextProvider>
      <Router>
        <Routes>
          <Route exact path="/restricted-zone" element={
            <ProtectedRoute>
              <RestrictedZone />
            </ProtectedRoute>
          } />
          {/* 其他路由 */}
        </Routes>
      </Router>
    </AuthContextProvider>
  );
}

export default App;

原理说明 #

• 通过isLoading状态，在auth初始化完成前渲染加载组件，避免未确定状态下的错误渲染
• 使用AuthContext中的user状态而非直接访问auth.currentUser，保证状态的一致性和可追踪性
• 修正user初始值为null，避免空对象导致的错误判断

内容的提问来源于stack exchange，提问作者alejandro