Next.js中如何解决<Link>组件legacyBehavior模式下的onClick警告？

问题现象 #

浏览器控制台出现大量类似警告：

"onClick" was passed to with href of /discovery/edit but "legacyBehavior" was set. The legacy behavior requires onClick be set on the child of next/link

问题原因 #

Next.js的<Link>组件在legacyBehavior模式（旧版行为）下，不允许直接在<Link>标签上绑定onClick事件，必须将onClick绑定到<Link>的直接子元素上。如果代码中存在直接给<Link>加onClick的情况，就会触发该警告。

另外你提供的侧边栏代码中，部分导航项的href值为#，这种情况下<Link>的路由逻辑会和普通锚点冲突，也可能间接引发类似问题。

解决方案 #

1. 修正所有<Link>的onClick绑定位置 #

确保所有onClick事件都绑定在<Link>的直接子元素上，而非<Link>本身。你当前侧边栏代码里的onClick已经放在子<div>上，这部分是正确的，但需要检查项目中其他使用<Link>的地方（比如警告提到的/discovery/edit页面相关代码），是否存在直接给<Link>加onClick的情况，将其移到子元素上即可。

2. 处理href="#"的导航项 #

对于不需要跳转的导航项（比如带下拉子菜单的"Matchmaker"），不要使用<Link>组件，直接用普通<div>或<button>代替，避免路由逻辑冲突：

{licensePro.map((item, i) => (
  <>
    {item.href !== "#" ? (
      <Link
        key={i + "sec1"}
        href={item.href}
        className={`${
          item.hintIndex === hintStep ? "z-[70]" : ""
        } flex items-center px-2 py-2 text-sm font-medium leading-6 rounded-md group text-cyan-100 hover:text-white hover:bg-cyan-600`}
        passHref
      >
        <div
          onClick={() => {
            localStorage.setItem("openMenu", "off");
          }}
          className={`text-cyan-100 cursor-pointer hover:text-white hover:bg-cyan-600 group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500`}
        >
          <item.icon
            className="w-6 h-6 mr-4 text-cyan-200"
            aria-hidden="true"
          />
          {item.name}
        </div>
      </Link>
    ) : (
      <div
        key={i + "sec1"}
        onClick={() => {
          localStorage.setItem("openMenu", "off");
          // 可在此添加下拉菜单展开逻辑
        }}
        className={`${
          item.hintIndex === hintStep ? "z-[70]" : ""
        } flex items-center px-2 py-2 text-sm font-medium leading-6 rounded-md group text-cyan-100 hover:text-white hover:bg-cyan-600 w-full cursor-pointer`}
      >
        <item.icon
          className="w-6 h-6 mr-4 text-cyan-200"
          aria-hidden="true"
        />
        {item.name}
      </div>
    )}
  </>
))}

3. 升级到Next.js 13+的新<Link>用法（推荐） #

如果使用的是Next.js 13及以上版本，可启用新版<Link>行为，无需再使用passHref，且支持直接在<Link>上绑定事件：

// 导入新版Link
import Link from 'next/link'

// 使用示例
<Link
  href={item.href}
  onClick={() => localStorage.setItem("openMenu", "off")}
  className="flex items-center px-2 py-2 text-sm font-medium leading-6 rounded-md group text-cyan-100 hover:text-white hover:bg-cyan-600"
>
  <item.icon className="w-6 h-6 mr-4 text-cyan-200" aria-hidden="true" />
  {item.name}
</Link>

新版<Link>默认不再使用legacyBehavior，会自动处理事件绑定，从根源避免此类警告。

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