My code is experiencing an issue where link.url is changing but pathName is not. I am trying to implement an animation transition on my website, but it is not working correctly because the pathName and link.url do not match.
"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
It's throwing this error:
⚠ 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
I hope to find a solution that meets my expectations.