如何让React导航栏滚动变色效果仅在首页生效？

要让滚动切换背景色的效果只在首页生效，核心是判断当前页面的路由路径，仅在首页（/）触发滚动逻辑，其他页面直接禁用该效果。以下是具体修改步骤：

步骤1：引入路由路径判断工具 #

从react-router-dom中导入useLocation钩子，用来获取当前页面的路由信息：

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

步骤2：修改状态与滚动监听逻辑 #

在组件内获取当前路径，调整useEffect里的滚动监听逻辑——只有在首页时才根据滚动距离更新sticky状态，其他页面强制关闭深色导航：

const [sticky, setSticky] = useState(false);
const location = useLocation(); // 获取当前路由路径

useEffect(() => {
  const handleScroll = () => {
    // 仅在首页时判断滚动距离，其他页面直接关闭深色导航
    if (location.pathname === '/') {
      setSticky(window.scrollY > 50);
    } else {
      setSticky(false);
    }
  };

  window.addEventListener("scroll", handleScroll);
  
  // 组件卸载时移除监听，避免内存泄漏
  return () => window.removeEventListener("scroll", handleScroll);
}, [location]); // 路由变化时自动更新监听逻辑

步骤3：保持原有渲染逻辑不变 #

返回的JSX部分无需修改，sticky状态会根据当前页面和滚动距离自动控制导航栏类名：

return (
  <nav className={`container ${sticky ? "dark-nav" : ""}`}>
    <Link to="/">
      <img src={Logo} className="Logo" alt="" />
    </Link>
    <ul className={mobileMenu ? "" : "hide-mobile-menu"}>
      <li>
        <NavLink to="/">Home</NavLink>
      </li>
      <li>
        <NavLink to="/About">About</NavLink>
      </li>
      <li>
        <NavLink to="/Services">Services</NavLink>
      </li>
      <li>
        <NavLink to="/Contact">
          <btn className="btn">Contact Us</btn>
        </NavLink>
      </li>
    </ul>
    <img src={menuIcon} alt="" className="menu-icon" onClick={toggleMenu} />
  </nav>
);

逻辑说明 #

• 首页滚动时，距离超过50px自动触发dark-nav类，切换导航栏背景色；
• 跳转到About、Services等页面时，sticky强制设为false，导航栏保持默认样式，滚动不会触发变色；
• 把location加入useEffect依赖数组，确保路由切换时立刻同步导航栏状态；
• 新增监听清理函数，避免组件卸载后残留滚动监听导致内存泄漏。

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