[ React ] validateDOMNesting(...): <a> cannot appear as a descendant of <a>. 에러 해결

 

프로젝트를 진행하던 도중 validateDOMNesting(...): <a> cannot appear as a descendant of <a>.  라는 에러 문구를 만났다. 경고창이 의미하는 것은 <a> 태그안에 <a> 태그가 존재한다는 경고문인 것 같았다.

 

<StHomeLink>
	<Link to="/home">Home</Link>
</StHomeLink>

const StHomeLink = styled.a`
  font-size: 25px;
  color: white;
  &:hover {
    border-bottom: 5px solid #8b8b8b;
  }
`;

 

원인은 Home 글씨를 클릭 시 홈으로 이동하게 만들기 위해 작성한 <Link to = "/home"> 에서 발생했다.

react - router- dom 의 Link 컴포넌트는 렌더링하면서 <a> 태그 요소로 변환된다.

 

그렇기에 상위 컴포넌트인 <StHomeLink> 역시 <a> 태그로 스타일 된 컴포넌트이고,

하위 컴포넌트인  <Link to = "/home"> 역시 렌더링되며 <a> 태그로 변환되기 때문에

<a> 태그 안에 <a> 태그가 존재해 발생한 에러였다.

 

💡 해결방법

구글링 결과 해결방법은 어렵지 않았다. 당연하게도 겹치는 두개의 <a>태그 중 하나를 제거하면 해결될 가벼운 에러였다.

const StHomeLink = styled.span`
  font-size: 25px;
  color: white;
  &:hover {
    border-bottom: 5px solid #8b8b8b;
  }
`;

 

<a> 태그가 아닌 다른 태그를 사용해주면 되는데, 나는 글자 아래에만 border-bottom이 생길 수 있게 스타일링 하기 위해서

<span> 태그를 사용하여 에러를 해결했다.