created: 2021-02-27T02:43:02.000Z

Next の Link コンポーネントで Warning: Function components cannot be given refs

next/link の Link コンポーネントは、children に関数コンポーネントを入れると警告が出る

import Link from "next/link";

<Link href="/">
  <MyButton />
</Link>;

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

Link は子要素に ref を渡す実装になっているので、関数コンポーネントに ref を渡してしまって警告が出ている。

https://github.com/vercel/next.js/blob/55e4a3d1add44aede18f4bc9f604f59ba49cc0b0/packages/next/client/link.tsx#L279

これは仕様ということになっているが、サクッと修正できる方法が存在しない、バグのような挙動だと言われている。

修正する方法の 1 つはメッセージ通りに React.forwardRef を使う方法。

const CustomComponent = React.forwardRef(function CustomComponent(props, ref) {
  return <div />;
});

とりあえず警告をでないようにしたいなら一番手軽なのは Fragment で囲ってしまうという方法がある、ただしこれだと Link が子要素に Click イベントが渡せなくなってしまうのでそういう子要素のときは使えない。

<Link href="/">
  <>
    <MyButton />
  </>
</Link>

参考