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

Question

I have this warning in my console, when I use nextJs Link component. Can you help me solve this problem and explain me why.

here is the console message

here is my piece of code

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;

Thank you for your help.

Answer 1

The quick solution is to use <a> tag inside Link .

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

Useful link to read: https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component