validateDOMNesting(...): <a> cannot appear as a descendant of <a> 에러 핸들링

상황

원래 작성했던 UserMenu 컴포넌트에 새로운 링크를 추가할 일이 있어서

추가했더니 갑자기 콘솔에 계속 경고가 생김

UserMenu 컴포넌트는 저런식으로 홈페이지 위에 링크를 연결한 컴포넌트인데

이렇게 하나 더 추가하려니까 콘솔에 에러가 찍혔다.

 

근데 블로그 글 작성하려고 코드를 다시 꼼꼼하게 보니까..

 

 

원래라면 이렇게 작성되어야 했던 코드가

<Link to="/qna">
  <div> QnA </div>
</Link>

<Link to="/coupon">
  <div> Counpon </div>
</Link>

<Link to="/signin">
  <div> Signin </div>
</Link>

^-^,,

 

<Link to="/qna">
  <div> QnA </div>
</Link>

<Link to="/signin">
  <Link to="/coupon">
    <div> Counpon </div>
  </Link>
  <div> Signin </div>
</Link>

이렇게 작성되어 있었다..

 

위치를 수정해주니 에러는 사라졌다.

 

결론

저 에러는 아마 Link 태그 안에 Link 태그를 넣어서 생긴 문제일 것이다.

태그를 똑바로 열고 닫고, 알맞게 사용하자!