[Next] 14버전에서 Link와 a를 같이 사용하는 방법
NextJS 14버전에서 Link와 a element를 같이 사용하고 싶은 경우가 있습니다.
<Link href={route} passHref>
<a href={route}>{name}</a>
</Link>
위처럼 코드를 작성하였는데 아래 에러가 발생하였습니다.
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor
- 해결방법 1
a element를 삭제한다.
그러나 이 방법은 제가 원하는 방법이 아니었습니다.
<Link href={route} passHref >
<a href={route}>{name}</a>
</Link>
- 해결방법 2
legacyBehavior props를 추가한다.
<Link href={route} passHref legacyBehavior>
<a href={route}>{name}</a>
</Link>
해결방법 2로 수정하였습니다.
반응형
'에러 모음 > React' 카테고리의 다른 글
| [Next] Next14 모노레포에서 로컬 페키지, 모듈 가져와서 사용하는 방법 (0) | 2024.07.12 |
|---|---|
| [Next] dynamic, lazy import 시 발생하는 에러 (0) | 2024.07.10 |
| [React] ReactDOM.render is no longer supported in React 18 해결하기 (0) | 2022.03.31 |
| [React] Adjacent JSX elements must be wrapped in an enclosing tag. (0) | 2021.10.28 |
| [React] Warning: Each child in a list should have a unique "key" prop. (2) | 2021.10.07 |
