从 react-router-dom 中使用 Grommet Anchor 作为 Link 时摆脱浏览器警告

Question

Grommet Anchor 'tag' 属性类型需要 'string'，因此使用来自 react-router-dom 的 Link 会创建一个控制台警告。除了警告，一切正常。

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

代码：

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

文档说：

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"

我做错了什么，是否可以消除警告？

Answer 1

如果你想使用 react router 的 path 功能而不渲染 Link 组件本身，那么可以这样做。

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>

标记需要一个字符串，不能用于呈现 Link。

从 react-router-dom 中使用 Grommet Anchor 作为 Link 时摆脱浏览器警告

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

reactjs

react-router

grommet

react-router-dom