如何不使用AuthContext实现React私有路由？基于Firebase v9

你遇到的空白页问题核心是Firebase Auth的初始化是异步的，没有加加载状态直接判断登录态就会导致提前渲染/跳转。不需要用AuthContext，直接基于你现有的Firebase auth实例就能实现私有路由，步骤如下：

步骤1：创建私有路由组件 #

新建PrivateRoute.js文件，代码如下：

import React, { useState, useEffect } from 'react';
import { Route, Redirect } from 'react-router-dom';
import { auth } from '../../../firebase'; // 按你自己的实际路径调整导入

const PrivateRoute = ({ component: Component, ...rest }) => {
  const [loading, setLoading] = useState(true);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setIsAuthenticated(!!user);
      setLoading(false);
    });
    // 组件卸载时清理监听器避免内存泄漏
    return unsubscribe;
  }, []);

  if (loading) {
    // 加载状态可以替换为你自己的加载动画组件
    return <div>加载中...</div>;
  }

  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

export default PrivateRoute;

步骤2：修改App.js替换路由配置 #

把原来的仪表盘普通路由替换为私有路由即可：

import './App.css';
import Home from './components/Pages/Home';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Signup from './components/Pages/Signup/Signup';
import Login from './components/Pages/Login/Login';
import UserDashboard from './components/Pages/UserDashboard/UserDashboard';
import ForgotPassword from './components/Pages/Forgot-Password';
import PrivateRoute from './PrivateRoute'; // 导入刚才创建的私有路由组件

function App() {
  return (
      <Router>
          <div>
            <Switch>
              <Route exact path="/" component={Home}/>
              <Route path="/signup" component={Signup}/>
              <Route path="/login" component={Login}/>
              {/* 替换原来的普通Route为PrivateRoute */}
              <PrivateRoute path="/dashboard" component={UserDashboard}/>
              <Route path="/request-password-reset" component={ForgotPassword}/>
            </Switch>
          </div>
      </Router>
  );
}

export default App;

可选优化：修复SignUp组件的监听器问题 #

你当前SignUp组件里直接在顶层调用onAuthStateChanged，每次组件渲染都会重复注册监听器，建议包在useEffect中：

// SignUp.js中修改对应代码
useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
    setUser(currentUser);
  })
  return unsubscribe
}, [])

配置完成后，未登录状态直接访问/dashboard会自动跳转到登录页，登录成功后可以正常访问仪表盘，不会出现空白页问题。

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