グロメットアンカーを反応ルータドームからのリンクとして使用するときにブラウザ警告を取り除く

Question

グロメットアンカー 'タグ'プロパティタイプは '文字列'を想定しているため、react-router-domからのリンクはコンソール警告を作成します。警告を除いて、すべて正常に動作します。

警告：失敗した小道具のタイプ：Anchorに供給タイプfunction の無効な小道具tag、stringを期待。

コード：

import {Link} from 'react-router-dom'; 
... 
<Anchor key={route.key} tag={Link} to={route.path} children={route.mainMenuLabel}/> 

ドキュメントは言う：

タグ{文字列}要素に使用するDOMタグ。デフォルトは です。これは、React Routerからのリンクのようなコンポーネント と組み合わせて使用​​する必要があります。この場合、Linkは のナビゲーションを制御し、Anchorはスタイリングを制御します。デフォルトはaです。

「グロメット-CSS」：「^ 1.6.0」

私が間違って何をやっているとの警告を取り除くこと、それは可能ですか？

Answer 1

反応ルータのpath機能を使用し、リンクコンポーネント自体をレンダリングしない場合は、このようにすることができます。

import Anchor from 'grommet/components/Anchor'; 

<Anchor icon={<Edit />} 
    label='Label' 
    path='/' // Give the react-router path here. 
/> 

あなたは絶対にLinkコンポーネントをレンダリングする必要がある場合は、

<Link to='/'> 
    <Anchor tag="span">Home</Anchor> 
</Link> 

タグは、文字列を期待してリンクをレンダリングするために使用することはできません。