React+Axios实现Private Route遇阻：登录状态路由跳转逻辑失效求助

你的PrivateRoute组件存在几个核心问题导致功能失效：

1. 组件未返回JSX：useEffect里的return是异步请求回调的返回值，不是组件的渲染结果，导致PrivateRoute渲染时没有输出任何内容。
2. 缺少加载状态处理：请求验证登录状态的过程中，页面会处于空白状态，用户体验差且可能引发逻辑错误。
3. 错误的组件渲染逻辑：直接在异步回调里返回Home组件完全不符合React的渲染机制，应该通过状态管理来控制渲染内容。

修正后的PrivateRoute.js #

import React, { useState, useEffect } from 'react'
import { Navigate } from "react-router-dom"
import Axios from 'axios'

// 把withCredentials放在组件外，避免重复设置
Axios.defaults.withCredentials = true;

const PrivateRoute = ({ children }) => {
    const [isLoggedIn, setIsLoggedIn] = useState(null); // null表示加载中
    const [isLoading, setIsLoading] = useState(true);

    useEffect(()=> {
        const checkAuth = async () => {
            try {
                const response = await Axios.get("http://localhost:3001/login");
                setIsLoggedIn(response.data.loggedIn === true);
            } catch (err) {
                // 请求失败默认视为未登录
                setIsLoggedIn(false);
                console.error("验证登录状态失败:", err);
            } finally {
                setIsLoading(false);
            }
        };

        checkAuth();
    },[])

    // 加载中可以显示加载提示
    if (isLoading) {
        return <div>加载中...</div>;
    }

    // 根据登录状态决定渲染内容
    return isLoggedIn ? children : <Navigate to="/" replace />;
}

export default PrivateRoute

修正后的App.js（无需大幅修改，确保写法符合v6规范） #

import React from 'react'
import { Route, Routes } from "react-router-dom"

// COMPONENTS
import Login from './login/login.js'
import Home from './home/home.js'
import PrivateRoute from './PrivateRoute.js'

// STYLE
import './login/login.css'
import './register/register.css'
import './App.css'


const App = () => {
    return (
        <Routes>
            <Route path="/" element={<Login/>} />
            <Route path="/home" element={
                <PrivateRoute>
                    <Home/>
                </PrivateRoute>
            } />
        </Routes>
    )
}
export default App

关键修改说明： #

• 新增isLoggedIn状态存储登录验证结果，isLoading状态处理请求加载过程。
• 使用async/await简化异步请求逻辑，同时添加错误捕获，避免请求失败导致状态卡住。
• 组件直接返回对应的渲染内容：加载中显示提示，已登录则渲染传入的children（也就是Home组件），未登录则通过Navigate重定向到登录页。
• 把Axios.defaults.withCredentials移到组件外部，避免每次组件渲染都重复设置。

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