如何在 Next.js 中为特定页面定制导航栏颜色逻辑-js教程-PHP中文网

如何在 Next.js 中为特定页面定制导航栏颜色逻辑

本文详解如何在 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 实现（已修复内存泄漏、路径判断与初始状态）：

OpenGemini Next.js Bestpractice Builder

使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目，仅将 FastAPI 用于 Python 工作负载，并遵循严格的架构规范。

下载

'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></logo><div classname="text-2xl font-medium xl:pl-[632px] md:block hidden">
              <link href="/lodge" classname="{color" :>
                LODGE
              
            </div>

            <div classname="text-2xl font-medium md:block hidden">
              <link href="/blog" classname="{color" :>
                OUR BLOG
              
            </div>

            <contacts></contacts><lang></lang>
</div>
        </container>
</div>
    </div>
  )
}

export default Navbar

关键改进说明：