React+Tailwind CSS实现导航栏当前路径链接条件样式不生效如何解决

问题原因 #

• 未正确获取当前页面路径传入Navbar组件，传入的path为空或和href格式不匹配：比如path携带域名前缀、尾斜杠、query参数、大小写不一致，都会导致全等判断失效
• 导航项的统一父级样式优先级高于text-yellow-400，导致样式被覆盖
• 当active为false时给div传undefined作为className，如果props内自带className属性，会出现拼接异常导致样式不生效

可行实现方案 #

1. 正确获取当前页面路径 #

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

Next.js 13+ App Router 版本

// Navbar组件顶部添加客户端标识，引入usePathname
'use client'
import { usePathname } from 'next/navigation'

const Navbar = () => {
  const currentPath = usePathname()
  return (
    <LinkItem href="/page1" path={currentPath}>
      Page 1
    </LinkItem>
  )
}

Next.js Pages Router 版本

import { useRouter } from 'next/router'

const Navbar = () => {
  const router = useRouter()
  const currentPath = router.asPath
  return (
    <LinkItem href="/page1" path={currentPath}>
      Page 1
    </LinkItem>
  )
}

2. 优化LinkItem组件逻辑 #

调整路径匹配规则，优化className拼接逻辑：

import NextLink from 'next/link'

const LinkItem = ({href, path, children, className = '', ...props}) => {
  // 移除路径尾斜杠，忽略query、hash，做宽松匹配
  const formatPath = (str) => str.split(/[?#]/)[0].replace(/\/$/, '')
  const isActive = formatPath(path) === formatPath(href)
  const activeClass = isActive ? 'text-yellow-400' : ''
  
  return (
    <NextLink href={href}>
      <div 
        className={`${className} ${activeClass}`.trim()}
        {...props}
      >
        {children}
      </div>
    </NextLink>
  )
}

3. 样式被覆盖的兜底方案 #

如果调整后样式仍不生效，可给高亮类添加Tailwind重要性标识，提升优先级：

const activeClass = isActive ? '!text-yellow-400' : ''

内容的提问来源于stack exchange，提问作者Rodrigo Yañez