CODEWITHSUNDEEP
javascriptreactjstypescriptnext.js
Anroche
Anroche

Reputation: 1021

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

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

enter image description here

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 .

Upvotes: 1

Views: 2483

Answers (1)

Tushar Gupta
Tushar Gupta

Reputation: 15933

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

Upvotes: 7

Related Questions