I have this structure:
return (
<nav className={`${isTransparent ? 'transparent' : ''}`}>
<Link href={'/'}>
<Image src={'/logo.svg'} width={68} height={50} alt="logo" />
</Link>
and got this error, what is wrong?
next-dev.js?3515:24 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `ForwardRef(LinkComponent)`.
at Image (webpack-internal:///./node_modules/next/dist/client/image.js:19:22)
at LinkComponent (webpack-internal:///./node_modules/next/dist/client/link.js:92:23)
at nav
at Navbar (webpack-internal:///./tikexModule/components/Navbar/index.tsx:27:31)
Image can not child of Link?
OK, I put <Image> inside <a>, it dismiss warning, but why? Could you explain?
<Link href="/">
<a>
<Image src="/logo.svg" width={68} height={50} alt="logo" />
</a>
</Link>