Getting rid of browser warning when using Grommet Anchor as Link from react-router-dom

Question

Grommet Anchor 'tag' property type expects 'string', so using Link from react-router-dom creates a console warning. Except the warning, everything works fine.

Warning: Failed prop type: Invalid prop tag of type function supplied to Anchor, expected string.

Code:

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

The documentation says:

tag {string} The DOM tag to use for the element. The default is . This should be used in conjunction with components like Link from React Router. In this case, Link controls the navigation while Anchor controls the styling. The default is a.

"grommet-css": "^1.6.0"

What am I doing wrong and is it possible to get rid of the warning?

Answer 1

If you want to use the path functionality of react router and not render the Link component itself, then it can be done like this.

import Anchor from 'grommet/components/Anchor';

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

If you have to absolutely render the Link component, then

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

Tag expects a string and cannot be used to render the Link.