使用React Router Outlet保护路由时页面空白的问题排查

可能的问题点及解决方案 #

1. AuthContext 中 user 状态未正确初始化或更新 #

PrivateRoutes 组件依赖 AuthContext 中的 user 判断是否渲染 Outlet，如果 user 的初始状态或登录后的更新存在问题，会导致登录后依然不渲染 HomePage：

• 初始状态问题：如果 AuthContext 中 user 初始值为 undefined，且登录后未正确设置为有效值，user ? <Outlet/> 的判断会为 false。
• 登录逻辑问题：登录成功后未调用 AuthContext 中的状态更新函数（如 setUser），导致 user 始终保持初始值。

修复示例（AuthContext.jsx）：

import { createContext, useState, useEffect } from 'react'

const AuthContext = createContext()

export const AuthProvider = ({ children }) => {
    // 初始设为 null，后续从 localStorage 恢复或登录后更新
    const [user, setUser] = useState(null)

    // 登录时更新用户状态并持久化
    const login = (userData) => {
        setUser(userData)
        localStorage.setItem('user', JSON.stringify(userData))
    }

    // 页面加载时从 localStorage 恢复用户状态
    useEffect(() => {
        const savedUser = localStorage.getItem('user')
        if (savedUser) {
            setUser(JSON.parse(savedUser))
        }
    }, [])

    return (
        <AuthContext.Provider value={{ user, login }}>
            {children}
        </AuthContext.Provider>
    )
}

export default AuthContext

2. PrivateRoutes 的判断逻辑不够严谨 #

当前代码中仅用 user ? <Outlet/> 判断，若登录后 user 是空对象（如 {}），依然会被视为假值，导致不渲染 Outlet。需要更严谨的判断逻辑：

修复示例（PrivateRoutes.jsx）：

import { Outlet, Navigate } from 'react-router-dom'
import { useContext } from 'react'
import AuthContext from '../context/AuthContext'

const PrivateRoutes = () => {
    const { user } = useContext(AuthContext)
    // 检查 user 存在且不为空对象
    return user && Object.keys(user).length > 0 ? <Outlet/> : <Navigate to="/login"/>
}

export default PrivateRoutes

3. 登录页面未正确触发状态更新与路由跳转 #

确保 LoginPage 中登录成功后，调用 AuthContext 的 login 函数更新用户状态，并跳转到首页：

修复示例（LoginPage.jsx）：

import { useContext, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import AuthContext from '../context/AuthContext'

const LoginPage = () => {
    const { login } = useContext(AuthContext)
    const navigate = useNavigate()
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')

    const handleLogin = (e) => {
        e.preventDefault()
        // 模拟登录请求，实际替换为真实接口调用
        const mockUser = { id: 1, username }
        login(mockUser)
        // 登录成功后跳转到首页
        navigate('/')
    }

    return (
        <form onSubmit={handleLogin}>
            <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                placeholder="用户名"
            />
            <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="密码"
            />
            <button type="submit">登录</button>
        </form>
    )
}

export default LoginPage

验证步骤 #

1. 登录成功后，打开浏览器控制台，在 Application 面板的 Local Storage 中确认是否存在 user 数据。
2. 在 PrivateRoutes 组件中添加 console.log(user)，查看登录后 user 的值是否符合预期。

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