Использование библиотеки clsx для условной композиции классов CSS, но получение неожиданного поведения ⇐ CSS

[Anonymous]

Пока я изучал библиотеку clsx для условной композиции классов CSS, я пытался поэкспериментировать с ней, реализовав активные ссылки на панели навигации. Я создал этот грубый компонент навигационной ссылки. Код отлично работает с именем пути === 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.name}

);
})}

);
}

Окончательный код:
'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.name}

);
})}

);
}


Подробнее здесь: https://stackoverflow.com/questions/782 ... unexpected