[Next.js] - Link 태그 Error

1. Error 항목 

Unhandled Runtime Error
Error: Multiple children were passed to <Link> with href of / but only one child is supported https://nextjs.org/docs/messages/link-multiple-children
Open your browser's console to view the Component stack trace.

 

1. 원인 ❓

<RoomInfoStyle style={{ background:'#E9E9E9',padding:''}}>
	<Link href={`/post`} passHref>
		<img alt=''>
		<div style={{ flexGrow: 1 }}>
			<span>{post.name}</span>
		</div>
	</Link>
	<FollowButton/>
</RoomInfoStyle>

• 위와 같이 하나의 Link컴포넌트 안에 두 개 이상의 컴포넌트 혹은 태그를 넣을 시 발생

 

1. ✅ 해결 

<RoomInfoStyle style={{ background:'#E9E9E9',padding:''}}>
	<Link href={`/post`} passHref>
    	<img alt=''/>
    </Link>
	<Link href={`/post`} passHref>
        <div style={{ flexGrow: 1 }}>
             <span>{post.name}</span>
        </div>
     </Link> 
     <FollowButton/>
</RoomInfoStyle>

• Link태그를 따로 분리

---

2. Error 항목 

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of `Link`.

 

2. 원인 ❓

 <Link href={`/post/`} passHref scroll={true}>
 	<SectionTitle/>
 </Link>

•  Link의 children으로 컴포넌트를 직접 줘서

 

2. ✅ 해결 

<Link href={`/post/`} passHref scroll={true}>
	<a>
 		<SectionTitle/>
	</a>
</Link>

• Link의 children에 a 태그를 사용하면 된다.