NextJS Link组件点击触发机制及导航栏激活态场景的事件处理咨询

首先明确Next.js的<Link>组件点击时的核心行为： #

• 阻止原生<a>标签的整页刷新跳转行为，走Next.js客户端路由转换逻辑
• 若开启prefetch（默认视口内的Link自动开启），会提前加载目标路由的资源
• 更新浏览器地址栏URL，触发useRouter返回的路由对象（pathname/asPath/query等）的响应式更新
• 路由转换过程中，仅卸载和目标路由不匹配的页面组件，共享的布局组件（比如导航栏）默认不会重挂载

你两种实现方案的问题根源： #

第一种方案失效原因 #

不是Link导致组件重挂载，是你给NavigationItem设置的key为每次渲染都会重新生成的uuidv4()，React检测到key变化会直接卸载旧的列表项、挂载新的列表项，你之前通过activateItem加的激活样式自然会丢失。

第二种方案失效原因 #

你的useEffect依赖数组为空，只会在菜单组件第一次挂载时执行一次。点击Link跳转后router.pathname发生变化，但没有被加入依赖数组，useEffect不会重新执行，自然不会触发新的激活逻辑。

推荐实现方案 #

优先用路由匹配的方式实现激活态，不需要处理点击事件，适配路由跳转、页面刷新、浏览器前进后退所有场景：

1. 菜单组件中通过当前路由路径匹配对应菜单项，传入激活状态：

const router = useRouter();

const MenuItems = MenuContent.map(item => {
    // 动态路由场景可以换成 router.asPath 做匹配
    const isActive = router.pathname === item.href;
    return (
        <NavigationItem key={item.href} {...item} isActive={isActive} />
    );
});

2. 导航项组件直接根据传入的isActive属性控制样式即可：

<ListItem className={props.isActive ? '你的激活样式类名' : ''}>
    <Link href={sub.href}>{sub.name}</Link>
</ListItem>

如果你要保留原来的点击激活逻辑，只需要把列表项的key换成固定的唯一值（比如item.href）即可正常运行。 #

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