[에러일지] React The href attribute requires a valid value to be accessible.

목차

· 원인

· 해결 방법

· 레퍼런스

---

React The href attribute requires a valid value to be accessible.

ESLint를 적용하면서, 그 전에 뜨지 않던 <a>태그에 관련된 에러가 뜨게 되었다. 아직은 하이퍼링크를 적용시키고 싶지는 않지만, 일단은 구현해두어야하는 코드기에 이럴 경우에는 어떻게 상황 대처를 해야하는지에 대해 의문이 들었다.

<a href="#">바로가기</a> // Vanilla
<Link to="#">바로가기</Link> // React

원인

The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. 

보통은 위의 같은 "#"으로 처리를 해놓지만, 리액트의 <strictMode>로 인해 href 속성이 없어도 안되고, 유효하지 않아도 문제가 된다. <a> 태그 사용 시 href 속성의 유효한 값이 필요하다는 의미이다.

해결 방법

// Vanilla
<a href="#!"> 바로가기 </a>
<a href="{() => false}">바로가기</a>

// React
<Link to="#!"> 바로가기 </Link>
<Link to="{() => false}">바로가기</a>

둘 중 하나의 방법을 택하면 된다, "#"에 "!"을 붙여서 경고문을 없애는 방향으로 에러를 해결할 수 있었다.

---

레퍼런스

프론트앤드 React <a>태그 사용시 나타나는 오류 해결하기