Next.js中link.url与pathName不匹配致动画过渡失效求助

核心问题分析 #

• 模板字符串语法错误：用单引号包裹className，导致${pathName === link.url && "bg-black text-white"}未被正确解析，这是引发Fast Refresh全量重载报错的直接原因。
• 路径格式不统一：link.url的值格式混乱，有的带根斜杠（/），有的不带（about、portfolio），但usePathname()返回的路径始终是带根斜杠的标准格式（如/portfolio），导致两者无法匹配，激活状态和过渡动画逻辑失效。

解决方案 #

1. 修复模板字符串语法 #

将className的单引号替换为反引号，确保模板字符串能被正确解析：

"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

2. 统一路径格式 #

有两种方式处理路径不一致的问题：

方式一：修改数据源，统一link.url格式

确保所有导航链接的url都以/开头，示例数据源：

const navLinks = [
    { url: "/", title: "Home" },
    { url: "/about", title: "About" },
    { url: "/portfolio", title: "Portfolio" },
    { url: "/contact", title: "Contact" }
]

方式二：在组件内标准化路径

如果无法修改数据源，可在组件内自动给link.url添加根斜杠前缀，同时避免重复添加：

"use client"

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

const Navlink = ({link}) => {
    const pathName = usePathname();
    // 标准化路径：确保以/开头
    const normalizedLinkUrl = link.url.startsWith('/') ? link.url : `/${link.url}`;
    console.log("normalizedLinkUrl:", normalizedLinkUrl);
    console.log("pathName:", pathName);

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

export default Navlink

3. 验证动画过渡效果 #

路径匹配正常后，即可继续添加路由过渡动画逻辑（如使用framer-motion或Next.js的App Router过渡API），此时路径状态一致，动画触发条件能正常工作。

内容的提问来源于stack exchange，提问作者Dhyan