중첩된 링크로 나는 에러로그

❓문제

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

🚧 에러메세지

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

아래는 현재 내가 쓰고 있는 코드인데, 처음에는 상세보기로 들어가는 링크를 제목인 BrandName 에 걸었다가 다른 사이트를 둘러보니 전체를 눌러서 상세보기로 들어가는 곳이 많아 전체로 다시 링크를 거는 작업을 거쳤었다.

//첫번째
<Link to={`${order.orderId}`}>
<AllPurchase>상세보기 &gt;</AllPurchase>
</Link>
 //두번째
<Link to={`${order.orderId}`}>
    <BP>
    	<BrandName>{[order.orderProducts[0].brandName]}<span>{order.orderProducts[0].title}</span>&nbsp;외 {order.orderProducts?.length}개</BrandName>
    	<Option>색상: {order.orderProducts[0].color}</Option>
    	<Price><span>₩&nbsp;{order.orderProducts[0].price?.toLocaleString("en-US")}</span></Price>
    </BP>
</Link>

const BrandName = styled(Link)``;

💪🏻해결

참고 블로그

중첩된 링크로 나는 오류 라고 한다. 해당 블로그에서는 button의 a 태그 중첩이라고 했는데, 내 코드를 살펴보니 BrandName 에도 (Link)가 걸려있었고, 그 바깥쪽에도 Link가 한번 더 걸려있어서 중첩되는 것이었다. 코드를 다시 고칠때는 모든 부분을 제대로 볼 것!!

 

👇추가

validateDOMNesting 이 에러가 어디에서 많이 나는지 찾아보니, p tag, div tag, button tag, link tag 등 여러 곳에서 많이 나는 것 같았다. 부모자식간의 관계와 태그를 중첩되게 쓰진않았는지 한번 더 꼼꼼히 살펴봐야할 것 같다.