Next.js使用Link包裹函数组件出现ref警告点击不跳转如何解决？

问题原因 #

Next.js 13+ 版本的 Link 组件默认会向直接子元素传递 ref 用于绑定跳转逻辑，你自定义的 BlogCard 是普通函数组件，没有处理 ref 接收逻辑，因此触发了控制台警告，同时跳转功能也无法正常生效。

解决方法 #

方法1：给BlogCard外层包裹原生DOM标签（推荐，无需修改原有组件）

在BlogCard外面套一层原生的<div>或<a>标签，原生DOM元素可以正常接收ref，不需要修改BlogCard的内部代码：

<div className="flex justify_between align_center flex_wrap mb_2 ">
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item) => (
      <Link href="/blog-details" key={item}>
        <div>
          <BlogCard />
        </div>
      </Link>
    ))}
</div>

方法2：使用React.forwardRef改造BlogCard组件

如果不想额外增加DOM层级，可以直接改造BlogCard组件支持接收ref：

// BlogCard 组件定义文件修改
import React from 'react'

const BlogCard = React.forwardRef((props, ref) => {
  // 原有组件逻辑不变，将ref挂载到组件最外层的DOM元素上
  return (
    <div ref={ref} className="你原有卡片的样式类">
      {/* 原有卡片内部内容 */}
    </div>
  )
})

BlogCard.displayName = 'BlogCard'
export default BlogCard

改造完成后原有调用代码无需修改，即可正常实现跳转，控制台警告也会消失。

方法3：旧版本Next.js适配（12及更早版本）

如果使用的是Pages Router的旧版本Next.js，可以给Link添加passHref属性，同时在BlogCard内部接收href属性绑定到自身的<a>标签上：

// 调用处修改
<Link href="/blog-details" key={item} passHref>
  <BlogCard />
</Link>

// BlogCard内部修改
const BlogCard = (props) => {
  return (
    <a href={props.href} className="卡片样式">
      {/* 卡片内容 */}
    </a>
  )
}

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