Next.js导航栏颜色适配问题：/lodge页面初始需为黑色

问题根源 #

1. 路径判断错误：app路由中/lodge/page.tsx对应的实际访问路径是/lodge，而非包含/lodge/page.tsx，导致原条件判断完全失效。
2. 初始状态未根据页面路径设置，/lodge页面加载时导航栏仍为白色，无法适配白色背景。
3. 滚动事件直接绑定到window但未在组件卸载时清理，存在内存泄漏风险。

修改后的代码 #

'use client'

import Image from "next/image"
import Link from "next/link"
import { useRouter } from 'next/navigation'

import Container from "../Container"
import Logo from "./Logo"
import Contacts from "./Contacts"
import Lang from "./Lang"

import { useState, useEffect } from "react";

const Navbar = () => {
    const router = useRouter()
    // 初始状态：如果是/lodge页面直接设为黑色，否则默认白色
    const [color, setColor] = useState(router.pathname === '/lodge')

    const changeColor = () => {
        // /lodge页面强制保持黑色，其他页面按滚动高度切换
        if (router.pathname === '/lodge') {
            setColor(true)
        } else {
            setColor(window.scrollY >= 950)
        }
    }

    useEffect(() => {
        window.addEventListener('scroll', changeColor)
        // 页面切换时同步更新导航栏颜色
        const updateColorOnRouteChange = () => {
            setColor(router.pathname === '/lodge' || window.scrollY >= 950)
        }
        updateColorOnRouteChange()
        // 组件卸载时清理监听事件
        return () => {
            window.removeEventListener('scroll', changeColor)
        }
    }, [router.pathname])

  return (
    <div className="fixed w-full backdrop-blur-sm shadow-sm">
        <div className="py-4 border-b-[2px]">
            <Container>
                <div className="flex flex-row items-center justify-between gap-4">
                    <Logo />

                    <div className="text-2xl font-medium xl:pl-[632px] md:block hidden">
                        <Link 
                            href="/lodge"
                            className={color ? 'text-[#313131]' : 'text-white'}
                        >
                            LODGE
                        </Link>
                    </div>

                    <div className="text-2xl font-medium md:block hidden">
                        <Link 
                            href="/blog"
                            className={color ? 'text-[#313131]' : 'text-white'}
                        >
                            OUR BLOG
                        </Link>
                    </div>

                    <Contacts />
                    <Lang />
                </div>
            </Container>
        </div>
    </div>
  )
}

export default Navbar

关键修改说明 #

• 路径判断修正：用router.pathname === '/lodge'替代原错误的路径匹配，准确识别目标页面。
• 初始状态适配：组件加载时直接根据当前路径设置颜色，确保/lodge页面打开时导航栏即为黑色。
• 事件生命周期管理：将滚动监听放在useEffect中，并添加卸载清理逻辑，避免内存泄漏。
• 页面切换同步：依赖router.pathname，切换页面时自动更新颜色状态，保证不同页面的导航栏行为符合预期。

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