本文详解如何在 Next.js 应用中实现导航栏（Navbar）的页面级颜色控制：全局默认滚动变色，但在 /lodge 页面始终显示黑色文字（适配白色背景），避免内容不可见问题。
本文详解如何在 next.js 应用中实现导航栏（navbar）的页面级颜色控制：全局默认滚动变色，但在 `/lodge` 页面始终显示黑色文字（适配白色背景），避免内容不可见问题。
在 Next.js（App Router）中，useClient 组件无法直接访问 window.location.pathname 的完整路径（如 /lodge/page.tsx），因为该路径是服务端生成的文件路径，而浏览器端实际路由为 /lodge。因此，原代码中 window.location.pathname.includes('/lodge/page.tsx') 永远返回 false —— 这是根本性误用。
正确做法是基于当前浏览器 URL 路径（即 window.location.pathname）判断是否处于 /lodge 路由下，并结合滚动状态动态设置颜色逻辑：
- ✅ 在 /lodge 页面：Navbar 文字始终为黑色（#313131），不随滚动变化；
- ✅ 在其他页面：保持原有行为——滚动 ≥ 950px 时文字由白色变为黑色，否则保持白色。
以下是优化后的完整 Navbar 实现（已修复内存泄漏、路径判断与初始状态）：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
'use client'
import { useState, useEffect } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import Container from '../Container'
import Logo from './Logo'
import Contacts from './Contacts'
import Lang from './Lang'
const Navbar = () => {
// 判断当前是否为 /lodge 页面（注意：使用 pathname，非文件路径）
const isLodgePage = typeof window !== 'undefined'
? window.location.pathname === '/lodge'
: false
// 初始状态：/lodge 页面默认黑色，其余页面默认白色
const [color, setColor] = useState(isLodgePage)
const changeColor = () => {
if (isLodgePage) {
// /lodge 页面：强制黑色，忽略滚动
setColor(true)
} else {
// 其他页面：滚动 ≥ 950px 时启用黑色
setColor(window.scrollY >= 950)
}
}
useEffect(() => {
// 安全添加事件监听器
window.addEventListener('scroll', changeColor)
// 清理函数防止内存泄漏
return () => window.removeEventListener('scroll', changeColor)
}, [isLodgePage]) // 依赖项包含 isLodgePage，确保切换页面时重新计算
return (
<div className="fixed w-full backdrop-blur-sm shadow-sm z-50">
<div className="py-4 border-b-[2px] bg-white/80 dark:bg-black/80">
<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关键改进说明：
- ✅ 使用 window.location.pathname === '/lodge' 替代错误的文件路径匹配；
- ✅ useState 初始化值直接依据当前页面决定，确保首屏渲染即正确；
- ✅ useEffect 添加清理函数，避免重复绑定或跨页面残留监听器；
- ✅ 条件逻辑清晰分离：isLodgePage 控制「是否锁定黑色」，scrollY >= 950 控制「何时触发变色」；
- ✅ 增加 z-50 和半透背景（bg-white/80），提升 Navbar 层级与视觉一致性。
⚠️ 注意：若项目启用深色模式，请同步调整 text-[#313131] 为语义化颜色（如 text-gray-900 dark:text-gray-100），并配合 dark: 变体完善可访问性。
通过此方案，你既能维持全局交互一致性，又能精准适配特殊页面的视觉需求——这才是现代 Next.js 导航栏应有的弹性与健壮性。
