DBILITY

react Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. 본문

front-end & ui/react

react Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

DBILITY 2021. 12. 11. 10:30
반응형

Warning이 빨간색으로 뜨면 어쩌자는 건지 초보는 식겁하게 된다.

읽어보니 a tag가 중첩이 되어 나타났다. 상식적으로 봐도 link안에 link는 당연히 문제.

코드를 살펴보니 react-bootstrap을 사용해서 Nav.Link를 썼는데 그 안에 Link태그를 또 썼다.

상위요소는 Nav였고 하위에 Nav.Link가 있는데 그안에 Link를 써서 문제였던 모양이다.

다른 Tag도 잘못된 중첩이 발생하면 이런 경고가 나오겠다.

Nav.Link에 as={Link} to={'/url'} 이렇게 하면 된다고 한다.

 

반응형
Comments