如何阻止NextJS的Link组件在点击指定子元素时跳转？

要实现点击特定子元素时阻止Link的跳转，核心是在目标子元素上绑定点击事件，通过阻止默认行为+停止事件冒泡切断Link的触发逻辑，具体实现如下：

代码示例 #

import Link from 'next/link';

export default function YourComponent() {
  const handleNoJump = (e) => {
    e.preventDefault(); // 阻止Link的默认导航行为
    e.stopPropagation(); // 阻止事件向上冒泡到Link组件
    // 这里可以添加点击该元素需要执行的自定义逻辑
  };

  return (
    <Link href="/go/to/page">
      <div className="flex">
        <span>This child should run link</span>
        {/* 其他正常触发跳转的子元素 */}
        <span onClick={handleNoJump}>This child should not run link!</span>
      </div>
    </Link>
  );
}

关键说明 #

• e.preventDefault()：直接禁用Link组件的默认跳转行为，即使事件冒泡到Link也不会触发导航
• e.stopPropagation()：阻止事件从子元素冒泡到外层的div和Link组件，从根源上避免Link捕获到点击事件
• 如果需要给这个子元素添加其他交互逻辑，直接在handleNoJump函数里编写即可

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