使用clsx库实现导航栏激活链接时出现异常行为

我在学习用clsx组合条件CSS类，实现导航栏激活链接功能。原本用pathname === link.href判断时，代码运行正常，对应路径的链接会正确高亮。但把判断条件里的link.href改成固定值比如'/dashboard'或'/dashboard/invoice'后，所有导航链接都被高亮了，而不是只有对应路径的链接。

初始正常代码 #

'use client';

import clsx from 'clsx';
import Link from 'next/link';
import { usePathname } from 'next/navigation'

const links = [
  { name: 'Home', 
  href: '/dashboard', 
  icon: HomeIcon },
  {
    name: 'Invoices',
    href: '/dashboard/invoices',
    icon: DocumentDuplicateIcon,
  },
  { name: 'Customers', 
  href: '/dashboard/customers', 
  icon: UserGroupIcon },
];

export default function NavLinks() {
  const pathname = usePathname()
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        console.log(link.href);
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx('flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
            {'bg-red-200 text-red-600': pathname === link.href}
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

修改后出现问题的代码 #

'use client';

import clsx from 'clsx';
import Link from 'next/link';
import { usePathname } from 'next/navigation'

const links = [
  { name: 'Home', 
  href: '/dashboard', 
  icon: HomeIcon },
  {
    name: 'Invoices',
    href: '/dashboard/invoices',
    icon: DocumentDuplicateIcon,
  },
  { name: 'Customers', 
  href: '/dashboard/customers', 
  icon: UserGroupIcon },
];

export default function NavLinks() {
  const pathname = usePathname()
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx('flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
            {'bg-red-200 text-red-600': pathname === '/dashboard'}
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

原因分析 #

当你把判断条件改成固定的pathname === '/dashboard'时，在遍历所有导航链接的循环中，每个链接都会执行这个判断：只要当前页面路径确实是/dashboard，所有链接的条件都会成立，因此每个链接都会被加上高亮的CSS类。

而最初使用pathname === link.href的逻辑是正确的——循环中的每个链接对应不同的href值，只有当当前路径和该链接自身的href完全匹配时，才会触发高亮，这样只会激活对应路径的导航项。

解决方案 #

根据你的需求选择对应的方案：

1. 保持每个链接对应自身路径的激活逻辑 #

直接回到初始代码的判断方式，这是导航激活最通用的实现：

{'bg-red-200 text-red-600': pathname === link.href}

2. 给指定单个链接添加固定路径判断 #

比如只想让Home链接在路径为/dashboard时高亮，其他链接保持原有逻辑：

{'bg-red-200 text-red-600': link.href === '/dashboard' && pathname === '/dashboard'}

如果想让Home链接在/dashboard及其所有子路径下都高亮（比如/dashboard/invoices时也高亮Home）：

{'bg-red-200 text-red-600': link.href === '/dashboard' && pathname.startsWith('/dashboard')}

3. 针对多个固定路径激活同一个链接 #

如果需要让多个路径都激活某个链接（比如/dashboard和/dashboard/invoices都激活Home）：

{'bg-red-200 text-red-600': link.href === '/dashboard' && ['/dashboard', '/dashboard/invoices'].includes(pathname)}

内容的提问来源于stack exchange，提问作者Abraham V G