【React/Next.js】自作コンポーネントをLinkで囲めない件

結論

divで囲んでしまえば、とりあえず解決

環境

• React 16.12.0
• Next.js 10.0.4

事象

こうすると

import Link from "next/link";

<Link href={`/sample`}>
  <MyComponent/>
</Link>

怒られる。

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

再度 結論

React.forwardRefを使えというので、色々なサイトを元に試行錯誤しましたがうまくいきませんでした。

なので仕方なくこう

<Link href={`/sample`}>
  <div>
    <MyComponent/>
  </div>
</Link>