Next.js动态路由页面如何针对性修改公共Navbar组件样式

原有代码问题 #

• 采用URL精确相等判断，无法匹配/Places/[id]这类带动态参数的路由路径
• 直接读取window.location在Next.js服务端渲染阶段会报错，且空依赖的useEffect不会在路由切换时重新执行，样式无法同步更新

适配方案 #

根据你使用的Next.js路由模式选择对应方案：

方案1：Pages Router 适用 #

直接使用Next.js内置的useRouter钩子获取路由定义路径，精准匹配动态路由：

import { useRouter } from 'next/router'

const Navbar = () => {
  const router = useRouter()
  // 直接匹配路由文件定义的路径格式，无需处理动态id
  const isPlace = router.pathname === '/Places/[id]'

  return (
    <div className="fullNav" style={{opacity: isPlace ? "0.5" : "1"}}> 
      {/* 导航栏其他内容 */}
    </div>
  )
}

无需额外使用useState和useEffect，路由切换时会自动触发组件重渲染更新样式。

方案2：App Router 适用 #

使用usePathname钩子获取当前路径，用正则匹配动态详情页，同时排除/Places列表页：

import { usePathname } from 'next/navigation'

const Navbar = () => {
  const pathname = usePathname()
  // 正则匹配 /Places/xxx 格式的路径，仅匹配动态id详情页
  const isPlace = /^\/Places\/[^/]+$/.test(pathname)

  return (
    <div className="fullNav" style={{opacity: isPlace ? "0.5" : "1"}}> 
      {/* 导航栏其他内容 */}
    </div>
  )
}

兜底兼容方案（不推荐，仅用于临时调试） #

如果你一定要沿用原有读取window.location的逻辑，只需要修改判断条件为正则匹配即可，注意要处理服务端渲染的window不存在问题：

const [isPlace, setIsPlace] = useState(false);
useEffect(() => {
  const url = window.location.href;
  // 匹配所有带id的Places详情页
  if (/\/Places\/[^/]+$/.test(url)) {
    setIsPlace(true)
  } else {
    setIsPlace(false)
  }
}, [window.location.href]);

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