React未认证用户访问首页短暂显示后跳转登录问题求助

问题原因 #

你的代码里存在两个关键问题导致了首页短暂显示：

1. useEffect中同步执行了setIsLoading(false)，这会让异步认证请求还没完成时，加载状态就提前结束
2. user初始值设为true，加载结束后会先默认渲染受保护的<Outlet />（首页），直到认证请求返回失败结果才跳转登录页

修复代码 #

修改PrivateOutlet组件，调整状态更新逻辑：

import axios from "axios";
import { useEffect, useState } from "react";
import { Navigate, Outlet } from "react-router-dom";

export default function PrivateOutlet() {
  // 初始设为null，明确区分"未认证判断"状态
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  const getUser = async () => {
    try {
      const { data } = await axios.get(
        `${process.env.REACT_APP_API_URL}auth/login/success`,
        {
          withCredentials: true,
        }
      );
      console.log(data.isLoggedIn);
      setUser(data);
    } catch (error) {
      setUser(false);
    } finally {
      // 请求完成（成功/失败）再关闭加载状态
      setIsLoading(false);
    }
  };

  useEffect(() => {
    getUser();
  }, []);

  if (isLoading) return <h1>loading</h1>;

  // 只有确认认证通过才渲染首页，否则跳转登录
  return user ? <Outlet /> : <Navigate to="/login" replace />;
}

额外优化说明 #

• 用finally块确保请求无论成功或失败，都会结束加载状态，避免无限加载
• 给<Navigate>加上replace属性，防止用户点击返回按钮回到短暂显示的首页，优化路由栈逻辑
• 将user初始值设为null，可以更清晰地区分「未完成认证判断」「已认证」「未认证」三种状态

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