警告：不能给函数组件提供引用。尝试访问此引用将失败。您的意思是使用 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

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

 <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-function-component