React仅首页导航栏滚动变色效果适配问题

问题分析 #

当前滚动变色功能在所有页面都生效，需求是仅首页在滚动超过650px时切换导航栏样式，其他页面（AboutUs、Shop、ContactUs等）固定使用.navbarbg、.nav-list-green a、.nav-list-green a:hover定义的样式。

解决方案 #

核心修改点：

• 使用React Router的useLocation替代原生window.location，准确判断当前页面路径
• 非首页直接强制启用目标样式，无需监听滚动
• 修复首页判断逻辑的错误

修改后的Navbar.jsx代码 #

'use client'

import React, { useState, useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import Logo from './Logo.jsx'
import '../App.css'

const Navbar = () => {
    const location = useLocation();
    const navigation = [ 
      {_id:101, title: 'ABOUT US', href: '/AboutUs'},
      {_id:102, title: 'SHOP', href: '/Shop'},
      {_id:103, title: 'MENU', href: '/Menu'},
      {_id:104, title: 'CONTACT US', href: '/ContactUs'},
    ];
    
    const [colour, setColour] = useState(false)

    useEffect(() => {
      // 判断是否为首页
      const isHomePage = location.pathname === '/';

      // 非首页直接启用navbarbg样式
      if (!isHomePage) {
        setColour(true);
        return;
      }

      // 首页监听滚动切换样式
      const changeColour = () => {
        setColour(window.scrollY >= 650);
      };

      window.addEventListener('scroll', changeColour);
      return () => window.removeEventListener('scroll', changeColour);
    }, [location.pathname]) // 路径变化时重新执行逻辑
    

  return (
    <div className={`navbar ${colour ? 'navbarbg' : ''}`}>
      <div className="container">
        <Logo />
        <ul className={`nav-list-beige ${colour ? 'nav-list-green' : ''}`}>
          {
            navigation.map((item) => (
              <Link to={item?.href} key={item._id}>
                <li className={`nav-link ${colour ? 'nav-link-colour' : ''}`}>
                  {item?.title}
                </li>
              </Link>
            ))
          }
        </ul>
      </div>
    </div>
  )
}

export default Navbar

关键修改说明 #

1. 引入useLocation：通过React Router提供的useLocation钩子获取当前页面路径，适配单页应用路由逻辑，比原生window.location更可靠。
2. 路径判断逻辑：用location.pathname === '/'准确判断首页，替代原错误的window.location.href.indexOf("/") === 0（所有路径都以/开头，无法区分首页）。
3. 非首页处理：非首页时直接将colour设为true，强制应用.navbarbg和.nav-list-green样式，无需监听滚动事件。
4. 依赖项更新：将location.pathname加入useEffect依赖数组，确保页面切换时重新执行样式逻辑。
5. 清理无用代码：删除未使用的state变量和无效的span样式代码。

CSS无需修改 #

原App.css中的样式定义保持不变即可满足需求。

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