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

문제

경고창에 <a> 태그 안에 <a>태그가 있다는 경고문이 떴습니다. 

메인 페이지에 접속하자 마자 뜬 오류라서 메인 페이지 코드부분을 살펴보았습니다.

react-router-dom의 Link 컴포넌트는 랜더링될때 <a> 요소로 변환됩니다.

<a> 태그로 정의된 styled component가 Link 컴포넌트안에 위치해 있어 위와같은 오류가 발생하였습니다.

 

해결방법

당연하게도 둘 중 하나를 제거하면됩니다.

저는 SPA의 특성상 새로 고침이 되는 <a> 태그보다는

부드러운 화면전환을 하는 Link 컴포넌트를 사용하여 오류를 없애주었습니다.