Next.js Link组件嵌套自定义子组件时未渲染<a>标签的问题

当使用Next.js的Link组件包裹自定义装饰组件（如示例中的HexString）时，会出现Link本该生成的<a>标签未在DOM中渲染的问题，仅能看到自定义组件内部的<span>元素。

问题代码示例 #

import React from 'react'
import Link from 'next/link'
import type { NextPage } from 'next'

interface Props {
  children: string
}

// 格式化十六进制字符串的自定义组件
const HexString = ({ children: hex }: Props)  => {
  const shortHex = hex.substring(0, 8) + '...' + hex.substring(hex.length - 6)
  return (
    <span title={hex} className="hex-string">
      {shortHex}
    </span>
  )
}

// 页面组件
const MyPage: NextPage = () => {
  return (
    <div>
      <Link href="/index">
        <HexString>0x0102030405060708090a0b0c0d0e0f</HexString>
      </Link>
    </div>
  )
}
export default MyPage

核心原因 #

Next.js的Link组件默认仅对原生HTML元素自动生成<a>标签并绑定导航逻辑。对于自定义React组件，需要明确告知Link如何处理子组件，才能正确渲染锚点标签。

解决方案 #

方案1：Next.js 13+ 推荐写法（支持App Router/Pages Router）

使用Link的asChild属性，该属性会让Link将导航逻辑传递给子组件，并在子组件外层自动渲染<a>标签，无需修改自定义组件结构：

// 仅修改页面组件中的Link部分
const MyPage: NextPage = () => {
  return (
    <div>
      <Link href="/index" asChild>
        <HexString>0x0102030405060708090a0b0c0d0e0f</HexString>
      </Link>
    </div>
  )
}

方案2：Next.js 12及更早版本（Pages Router）

给Link添加passHref属性，同时让自定义组件接收并传递所有剩余属性给内部的原生元素（确保Link能识别到可绑定导航的元素）：

// 修改HexString组件，接收并传递剩余属性
const HexString = ({ children: hex, ...rest }: Props & React.HTMLAttributes<HTMLSpanElement>)  => {
  const shortHex = hex.substring(0, 8) + '...' + hex.substring(hex.length - 6)
  return (
    <span title={hex} className="hex-string" {...rest}>
      {shortHex}
    </span>
  )
}

// 页面组件中给Link添加passHref
const MyPage: NextPage = () => {
  return (
    <div>
      <Link href="/index" passHref>
        <HexString>0x0102030405060708090a0b0c0d0e0f</HexString>
      </Link>
    </div>
  )
}

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