页面每次加载时Navbar组件在首页短暂闪现问题如何修复

• 初始状态默认设置为false，页面首次渲染时navbar按非首页逻辑渲染，无顶部margin，直接显示在页面顶部
• 监听的window.load事件需要等待页面所有静态资源（图片、样式表等）全部加载完成才会触发，状态更新严重滞后，两次渲染结果不一致导致视觉闪烁

基础修复（无React Router等路由库场景） #

直接在useState初始化阶段同步判断当前页面路径，首次渲染就拿到正确的状态值，从根源避免两次渲染的差异，同时替换硬编码的完整URL判断为路径判断，适配生产环境部署：

// 初始化直接计算状态，不需要等待事件触发
const [isHome, setIsHome] = useState(() => window.location.pathname === '/home');

// 不需要额外监听load事件，若需要适配单页应用路由跳转可以替换为对应路由的监听逻辑
return (
  <div className="fullNav" style={{marginTop: isHome ? "100vh" : ""}}>
    {/* 其余navbar组件逻辑 */}
  </div>
)

优化方案（使用React Router等路由库的单页应用场景） #

直接使用路由库提供的路径查询钩子，不需要手动维护state和事件监听，性能更高也更适配单页应用的跳转逻辑，以React Router v6为例：

import { useLocation } from 'react-router-dom';

function Navbar() {
  const location = useLocation();
  // 直接计算即可，不需要state和useEffect
  const isHome = location.pathname === '/home';

  return (
    <div className="fullNav" style={{marginTop: isHome ? "100vh" : ""}}>
      {/* 其余navbar组件逻辑 */}
    </div>
  )
}

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