Grommet Anchor를 반응 라우터 DOM에서 링크로 사용할 때 브라우저 경고 제거

Question

Grommet Anchor '태그'속성 유형에 'string'이 필요하므로 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와 같은 구성 요소 과 함께 사용해야합니다. 이 경우 Link는 탐색을 제어하고 Anchor는 스타일을 제어합니다. 기본값은 a입니다.

"그로밋 - CSS" "^ 1.6.0"내가 잘못하고 있으며이 가능하고 무엇

경고 없애?

Answer 1

반응 라우터의 path 기능을 사용하고 Link 구성 요소 자체를 렌더링하지 않으려면 다음과 같이 수행 할 수 있습니다. 당신이 절대적으로 Link 구성 요소를 렌더링해야하는 경우

import Anchor from 'grommet/components/Anchor'; 

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

후

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

태그 문자열을 기대하고 링크를 렌더링하는 데 사용할 수 없습니다.