Next.js中<Link>组件包裹自定义Card点击无法跳转问题咨询

核心差异原因 #

react-router的<Link>组件本身会渲染为标准的<a> DOM标签，所以直接包裹任意内容就能绑定跳转逻辑。但Pages Router版本的Next.js（v12及更早，v13+使用Pages Router时也沿用该逻辑）的<Link>是无UI的高阶组件，本身不渲染任何DOM节点，只会将跳转相关的href属性、点击事件监听器传递给直接子元素，所以要求直接子元素必须能接收并绑定这些属性才能生效。

你现在直接把自定义<Card>作为<Link>的子组件，跳转属性没有被绑定到<Card>内部的DOM节点上，自然无法触发跳转。你加了<a>标签后，<a>作为标准可跳转元素接收了<Link>传递的属性，所以功能正常。

两种解决方案 #

方案1：保持现有用法，在<Link>内嵌套<a>标签包裹<Card> #

这是最常用的兼容写法，修改你的遍历逻辑即可：

{cards.map((e, index) => {
  return (
  <Link href={"/browse/" + e.name} key={e.name} passHref>
    <a style={{textDecoration: 'none', color: 'inherit'}}>
      <Card
        key={index}
        name={e.name}
        description={e.description}
        price={e.price}
        img={e.img}
      />
    </a>
  </Link>
  )
})}

加行内样式是为了避免<a>标签默认的下划线、字体色影响卡片样式。

方案2：修改<Card>组件透传属性 #

如果不想多嵌套一层<a>，可以让你的<Card>组件把未声明的props全部透传到外层DOM节点：

// /components/card.js 文件内修改
const Card = (props) => {
  // 解构出你明确要使用的props，剩下的全部存到rest里
  const { name, description, price, img, ...rest } = props
  return (
    // 把rest绑定到卡片最外层的DOM节点上
    <div className="card-wrapper" {...rest}>
      {/* 原有卡片内容逻辑不变 */}
    </div>
  )
}
export default Card

这样<Link>传递的跳转属性就会直接绑定到卡片外层容器上，不需要嵌套<a>也能正常跳转。

版本补充说明 #

如果你升级到Next.js 13+且使用App Router，next/link的逻辑已经更新，默认会自动渲染<a>标签，不需要手动嵌套，用法和react-router的<Link>完全一致。

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