Next.js嵌套导航冲突问题：点击子元素触发两次跳转求解

问题根源是事件冒泡机制：点击h1时，点击事件会向上传递到外层的Link组件，导致先执行h1的router.push('/login')，紧接着Link的跳转逻辑也会触发，最终出现两次跳转的异常。

解决方法很简单，在h1的onClick事件中添加e.stopPropagation()阻止事件冒泡到父级Link：

<Link href="/playing">
  <div className="px-20 w-full">
    <h1 onClick={(e) => {
      e.stopPropagation(); // 阻止事件冒泡到外层Link
      router.push('/login');
    }} className="hover:underline">
      Login
    </h1>
  </div>
</Link>

修改后效果：

• 点击Login文字时，仅触发/login的跳转，不会触发外层Link的/playing跳转
• 点击div的其他区域（除h1外），正常触发Link的/playing跳转，完全保留原需求逻辑

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