[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避する方法は？

質問

以下のようなものがあります（マテリアルUI使用）...。

import React from "react";
import { NavLink } from "react-router-dom";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
function LinkTab(link){
    return <Tab component={NavLink}
        to={link.link}
        label={link.label}
        value={link.link}
        key={link.link}
    />;
}

新しいバージョンでは、次のような警告が表示されます。

警告 関数コンポーネントに参照元を与えることはできません。アクセスしようとすると このrefは失敗します。React.forwardRef()を使用するつもりだったのでしょうか？

のrenderメソッドを確認してください。 ForwardRef . in NavLink (ForwardRefで作成)

に変えてみたのですが・・・。

function LinkTab(link){
    // See https://material-ui.com/guides/composition/#caveat-with-refs
    const MyLink = React.forwardRef((props, ref) => <NavLink {...props} ref={ref} />);
    return <Tab component={MyLink}
        to={link.link}
        label={link.label}
        value={link.link}
        key={link.link}
    />;
}

しかし、まだ警告が出ます。どうすればこの問題を解決できるのでしょうか？

解決方法を教えてください。

NavLink から react-router を特殊化した機能部品です。 リンク を公開する。 innerRef プロパティを使用します。

// required for react-router-dom < 6.0.0
// see https://github.com/ReactTraining/react-router/issues/6056#issuecomment-435524678
const MyLink = React.forwardRef((props, ref) => <NavLink innerRef={ref} {...props} />);

また、私たちのドキュメントを検索して react-router につながる。 https://mui.com/getting-started/faq/#how-do-i-use-react-router にリンクしています。 https://mui.com/components/buttons/#third-party-routing-library . 最後のリンクは、動作例と、react-router v6でどのように変更される可能性があるのかを説明しています。