警告：无法为 Function 组件提供参考。 尝试访问此 ref 将失败。 你是想使用 React.forwardRef() 吗？

Question

当我使用nextJs Link组件时，我的控制台中出现了这个警告。 你能帮我解决这个问题并解释一下原因吗？

这是控制台消息

这是我的一段代码

import React from "react";
import Image from 'next/image'
import Link from 'next/link'

import logo from '/public/Images/E2R5_white.png';


const Logo = () => {

    return (
        <div className="">
            <Link href="/">
                <Image
                    src={logo}
                    height="50"
                    width={"80"}
                    alt="Logo - E2R5"
                />
            </Link>
        </div>)
}

export default Logo;

谢谢您的帮助。

Answer 1

快速的解决方案是在Link中使用<a>标签。

 <Link href="/">
   <a>
      <Image src={logo} height="50" width={ "80"} alt="Logo - E2R5" />
   </a>
 </Link>

有用的阅读链接： https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component