Suppression de l'avertissement du navigateur lors de l'utilisation de Grommet Anchor comme lien de la part de rea-router-dom

Question

Type de propriété 'tag' Ancrage de l'ancre s'attend à 'chaîne', donc l'utilisation de Link de react-router-dom crée un avertissement de console. Sauf l'avertissement, tout fonctionne bien.

Attention: Type prop échoué: prop non valide tag de type function fourni à Anchor, prévu string.

code:

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

La documentation dit:

tag

{string} La balise DOM à utiliser pour l'élément. Le est par défaut. Cela doit être utilisé en conjonction avec les composants comme Lien du routeur React. Dans ce cas, Link contrôle la navigation tandis que Anchor contrôle le style. La valeur par défaut est a.

"passe-câble css": "^ 1.6.0"

Qu'est-ce que je fais mal et est-il possible de se débarrasser de l'avertissement?

Answer 1

Si vous souhaitez utiliser la fonctionnalité path du routeur de réaction et ne pas afficher le composant Lien lui-même, cela peut être fait comme suit.

import Anchor from 'grommet/components/Anchor'; 

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

Si vous devez absolument rendre le composant Link, puis

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

Tag attend une chaîne et ne peut pas être utilisé pour rendre le lien.