Next.js中如何向Link组件的onClick传递href？为何点击不触发console.log？

Pages Router、Next.js 12及更早版本下的<Link>是纯路由包装组件，不会透传任何原生DOM事件属性到最终渲染的节点。你把onClick写在<Link>标签上，这个回调根本没有绑定到实际可点击的元素——用户实际点击的是Link内部包裹的<a>标签，回调自然永远不会执行。

1. 通用兼容写法 #

调整事件绑定位置，把onClick从<Link>标签迁移到内部的<a>标签上，适配所有Next.js版本，调整后完整可运行代码如下：

import Link from "next/link";

export default function IndexPage() {
  const handleClick = (path) => {
    if (path === "/about") {
      console.log("I clicked on the About Page");
    }
    if (path === "/posts") {
      console.log("I clicked on the Posts Page");
    }
  };
  return (
    <div>
      Hello World.{" "}
      <Link href="/about">
        <a onClick={() => handleClick("/about")}>About</a>
      </Link>
      <Link href="/posts">
        <a onClick={() => handleClick("/posts")}>Posts</a>
      </Link>
    </div>
  );
}

2. 代码优化 #

原有写法需要在每个链接的回调里手动传入对应路径，存在重复维护的问题。可以直接从点击事件对象中读取当前锚点的href值，省去手动传参的步骤：

import Link from "next/link";

export default function IndexPage() {
  const handleClick = (e) => {
    // 直接读取当前点击锚点上的href属性
    const targetPath = e.currentTarget.getAttribute("href");
    if (targetPath === "/about") {
      console.log("I clicked on the About Page");
    }
    if (targetPath === "/posts") {
      console.log("I clicked on the Posts Page");
    }
  };
  return (
    <div>
      Hello World.{" "}
      <Link href="/about">
        <a onClick={handleClick}>About</a>
      </Link>
      <Link href="/posts">
        <a onClick={handleClick}>Posts</a>
      </Link>
    </div>
  );
}

3. 版本差异提示 #

• 如果使用Next.js 13+的App Router模式，<Link>组件已经移除了必须包裹<a>标签的要求，会自动将传入的原生DOM属性（比如onClick）绑定到最终渲染的锚点元素上，此时可以直接把onClick写在Link标签上正常运行。
• 如果使用Pages Router模式、或是Next.js 12及更早的版本，无论版本多新，都要遵循把事件绑定在内部<a>标签上的写法，否则事件永远无法触发。

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