ReactJS导航栏刷新时登录注册按钮闪烁问题求解

问题原因 #

刷新页面后，useUserLoginDetailQuery发起API请求需要一定时间，初始状态下user为undefined，组件会先渲染登录/注册按钮；等请求完成拿到用户数据后，才会切换显示用户名，这就导致了短暂的闪烁现象。

解决方案 #

核心思路是在API请求加载期间，根据localStorage中的accessToken提前判断用户状态，避免错误渲染登录按钮，同时利用isLoading状态控制加载时的显示内容。

修改后的代码示例 #

import { Link } from "react-router-dom";
import { useUserLoginDetailQuery } from "../pages/user/userApiSlice";

export const Navbar = () => {
  const { data: user, isLoading } = useUserLoginDetailQuery();
  // 读取localStorage中的accessToken，判断用户是否可能已登录
  const hasToken = !!localStorage.getItem('accessToken');

  return (
    <nav className="w-full h-28 flex flex-row px-16 items-center gap-28 border-b-blue-700 border-b-2">
      <Link to="/">
        <img src="/logo.svg" className="h-14" />
      </Link>
      <div className="flex flex-row gap-8">
        {isLoading ? (
          // 加载状态下：有token则显示加载占位，无token才显示登录注册
          hasToken ? (
            <span className="text-blue-500 font-bold">加载中...</span>
            {/* 可替换为骨架屏组件优化视觉体验：<div className="w-32 h-10 bg-gray-200 rounded"></div> */}
          ) : (
            <>
              <Link
                to="/login"
                className="bg-none border-2 px-4 flex items-center h-10 text-blue-500 font-bold rounded-lg border-blue-500 hover:bg-blue-500 hover:text-white ease-in-out duration-200"
              >
                Login
              </Link>
              <Link
                to="/register"
                className="bg-blue-500 px-4 flex items-center h-10 border-2 border-blue-500 text-white font-bold rounded-lg  hover:bg-white hover:text-blue-500 ease-in-out duration-200"
              >
                Register
              </Link>
            </>
          )
        ) : user ? (
          // 请求完成且有用户数据，显示用户名
          <span>{user.nama}</span>
        ) : (
          // 请求完成但无用户数据，显示登录注册
          <>
            <Link
              to="/login"
              className="bg-none border-2 px-4 flex items-center h-10 text-blue-500 font-bold rounded-lg border-blue-500 hover:bg-blue-500 hover:text-white ease-in-out duration-200"
            >
              Login
            </Link>
            <Link
              to="/register"
              className="bg-blue-500 px-4 flex items-center h-10 border-2 border-blue-500 text-white font-bold rounded-lg  hover:bg-white hover:text-blue-500 ease-in-out duration-200"
            >
              Register
            </Link>
          </>
        )}
      </div>
    </nav>
  );
};

关键改动说明 #

1. 新增hasToken判断：利用登录后存入localStorage的accessToken，提前知晓用户是否处于已登录状态，避免加载期间错误渲染登录按钮。
2. 加载状态分支处理：在isLoading时，根据hasToken决定显示内容——有token时展示加载占位（或骨架屏），无token时正常显示登录注册按钮。
3. 逻辑分层清晰：将加载中、请求完成有数据、请求完成无数据三种状态的UI展示明确拆分，彻底解决闪烁问题。

额外优化建议 #

• 如果项目使用RTK Query，可以为useUserLoginDetailQuery配置缓存策略（如keepUnusedDataFor），让刷新页面时优先读取缓存数据，进一步缩短加载等待时间。
• 用骨架屏组件替换文字式的"加载中..."，能让页面过渡更自然，提升用户体验。

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