在我的代码中，link.url 正在更改，但 pathName 没有更改？

Question

在我的代码中，link.url 正在更改，但 pathName 没有更改。我想为我的网站提供动画过渡，但它不支持，因为 pathName 和 link.url 不匹配。

"use client"

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

const Navlink = ({link}) => {

        const pathName = usePathname();
        console.log("link.url:", link.url);
        console.log("pathName:", pathName);

    return (
        <Link className={'rounded p-1 ${pathName === link.url && "bg-black text-white" }'} href={link.url}>
        {link.title}</Link>
    )
}

export default Navlink

出现此错误

⚠ Fast Refresh had to perform a full reload due to a runtime error.
link.url: /
pathName: /portfolio
link.url: about
pathName: /portfolio
link.url: portfolio
pathName: /portfolio
link.url: contact
pathName: /portfolio

我想我会得到一个好的解决方案，正如我所期望的。

Answer 1

使用单引号 (') 而不是反引号 (

) 来定义模板文字似乎存在错误。

这是更正后的版本：

{链接.标题}

通过此更正，类名称将被正确插值，并且当 pathName === link.url 时将应用条件类 bg-black text-white。

<Link className={`rounded p-1 ${pathName === link.url && "bg-black text-white"}`} href={link.url}>
    {link.title}
</Link>