Next.js 13中嵌套Link组件失效问题求助

核心原因 #

Next.js 13 调整了<Link>组件的实现逻辑，现在它会直接渲染原生<a>标签。而HTML规范禁止嵌套<a>标签，这就导致原有的嵌套结构被浏览器解析异常，最终功能失效。

可行解决方案 #

方案一：用useRouter手动处理外层跳转（推荐） #

把外层的跳转逻辑改为通过点击事件触发，保留内层<Link>组件的正常功能：

'use client'; // App Router 环境下必须添加，Page Router 无需此指令

import { useRouter } from 'next/navigation'; // App Router 用这个，Page Router 替换为 next/router
import Link from 'next/link';

export default function PostCard({ post }) {
  const router = useRouter();

  const handleCardClick = (e) => {
    // 点击内层链接时，阻止外层跳转逻辑触发
    if (e.target.closest('a')) return;
    router.push(post.url);
  };

  return (
    <div 
      className={styles.post} 
      onClick={handleCardClick} 
      style={{ cursor: 'pointer' }}
    >
      ...title and stuff
      <Link href={post.groupUrl}>{post.group}</Link>
    </div>
  );
}

方案二：替换外层Link为原生<a>标签（不推荐） #

如果不想使用useRouter，可以把外层改成原生<a>标签，但会丢失Next.js的客户端导航特性（比如预加载、无刷新跳转）：

import Link from 'next/link';

export default function PostCard({ post }) {
  return (
    <a href={post.url} className={styles.post}>
      ...title and stuff
      {/* 阻止内层链接的事件冒泡，避免触发两次跳转 */}
      <Link href={post.groupUrl} onClick={(e) => e.stopPropagation()}>
        {post.group}
      </Link>
    </a>
  );
}

关键注意点 #

• App Router 环境下使用useRouter必须添加'use client'指令，因为它属于客户端组件API
• 手动处理点击事件时，一定要判断点击目标是否为内层链接，避免触发两次跳转
• 优先选择方案一，能完整保留Next.js的客户端导航优势

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