【Next.js/React】Function components cannot be given refs…エラーの原因と解消法

Next.jsを学習中、Linkコンポーネントを使用していた際に、Function components cannot be given refs…エラーに悩まされたので、その備忘録です。

エラー内容

コード

<Link href="/login>
  <Anchor
    title="ログイン"
  />
</Link>

Anchorコンポーネントを用意してLinkコンポーネント内で使用しようとしていました。

エラー内容

react_devtools_backend.js:2528 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 `Link`.

LinkコンポーネントでReact.forwardRef()?を使いましたかといった記述があったのでforwardRefを活用することで対処できそうです。しかし、Next.jsのref操作をまだ理解できておらず、この方法での解決策は発掘できませんでせいた。

対処法

私の方で見つけたこのエラーの対処法は2つあります。

1.Link内でコンポーネントを用いない

Linkコンポーネント内で別のコンポーネントを用いることでエラーが発生しているようです。これは、

• Linkコンポーネント内で別のコンポーネントを使用しない
• 空のaタグを用意して、aタグ内でコンポーネントを記述する

で対処することができそうです。

OKコード例

<Link href="/href">
  <button
    type="custom"
    color="#FCFCFC"
  >
    buttonText
  </button>
</Link>

<Link href="/href">
  <a>
    <Button
      type="custom"
      color="#FCFCFC"
    >
      buttonText
    </Button>
  </a>
</Link>

参考：Next 9 – Using functional components as child of <Link/> causes ref-warnings #7915

2.コンポーネント内でLinkコンポーネントを使う

そもそもLinkコンポーネントを別のコンポーネントの中に呼び出すことでもエラーは出ませんでした。この方法が楽そうですね。

<Anchor
  href="/login"
  title="ログイン"
/>

//Anchor.tsx
<Link href={href}>
  <a>
    {title}
  </a>
</Link>

最初に、Link.tsxファイルを用意して別のLinkコンポーネントを作成しており、その時にLinkという名前は使えませんよとエラーが出たのでLinkコンポーネントを外に置いてAnchor.tsxファイルでリンクを管理しようと思い立ったのですが、その発想が間違いだったようす。

まとめ

React.forwardRef()を使うことでも何かできそうなのですが、まだ理解できるレベルには達していませんでした。当分はいろんなエラーに悩まされることになりそうなものの、Reactは書いていて楽しいなと。

参考：next/link は atoms に含めるべきか？