"Warning: Function components cannot be given refs" error while using Link in nextJs

Question

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

I am getting this error when in nextJs when I wrap an Image tag inside a Link tag :

<Link href="/">
   <Image src={logo} width={50} height={50} className="btn rounded-full bg-transparent" />
</Link>

github.com/vercel/next.js/issues/20434#issuecomment-750673138 — imjared
– imjared, Commented May 9, 2022 at 2:03

Michael Flores · Accepted Answer · 2022-05-09 03:45:54Z

3

That error means that the element you passed cannot be used to forward a ref, so using any element that does allow that will work. Typically you'll wrap it in an <a> tag in this case. i.e.

<Link>
   <a>
      <Image />
   </a>
</Link>

answered May 9, 2022 at 3:45

Michael Flores

7364 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

"Warning: Function components cannot be given refs" error while using Link in nextJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related