本文介绍如何在 react 中通过判断当前路由路径，使导航栏的滚动变色效果（如滚动超过 50px 添加 dark-nav 类）仅在首页（/）生效，避免影响 about、services 等其他页面。

本文介绍如何在 react 中通过判断当前路由路径，使导航栏的滚动变色效果（如滚动超过 50px 添加 dark-nav 类）仅在首页（/）生效，避免影响 about、services 等其他页面。

要实现导航栏滚动吸顶样式的页面级条件控制，关键在于将滚动监听逻辑与当前路由解耦，并在 useEffect 中精准限定其执行范围。直接在组件顶层添加全局 scroll 监听器会导致所有使用该 <navbar></navbar> 组件的页面（如 /About、/Contact）都触发相同行为——这显然不符合需求。

✅ 正确做法是：在 useEffect 中读取 window.location.pathname，仅当用户位于首页（即路径为 / 或空字符串 ""）时，才注册滚动事件监听器。注意需手动清理监听器以避免内存泄漏：

const [sticky, setSticky] = useState(false);

useEffect(() => {
  const path = window.location.pathname.trim();
  // 仅在首页启用滚动监听
  if (path === "" || path === "/") {
    const handleScroll = () => {
      setSticky(window.scrollY > 50);
    };
    window.addEventListener("scroll", handleScroll);

    // ✅ 清理函数：组件卸载或路径变化时移除监听器
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }
}, []);

⚠️ 注意事项：

Auth0 React

已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。

下载

• 不要省略清理函数：否则切换到 /About 后再返回 / 可能导致重复绑定，引发状态错乱；
• 避免依赖 useLocation()（如来自 react-router-dom v6+）：虽然更语义化，但 window.location.pathname 更轻量且无需额外 Hook 依赖，适合简单场景；
• 服务端渲染（SSR）兼容性提示：若使用 Next.js 或 Remix，请将 window 相关逻辑包裹在 typeof window !== 'undefined' 判断中，防止服务端报错；
• CSS 配合建议：确保 .dark-nav 类已正确定义背景色与过渡效果，例如：

  .dark-nav {
    background-color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
  }

最终，该方案实现了「一次编写、按需激活」的样式控制逻辑——Navbar 组件本身保持复用性，而行为表现由运行时路径动态决定，兼顾可维护性与性能。