I'm having a component called Nav inside components directory and it's code is some thing like below:
import Link from 'next/link';
const Nav = () => {
return(
<div>
<Link href="/"> <a> Home </a> </Link>
<Link href="/about"> <a> About </a> </Link>
</div>
)
}
export default Nav;
This gives me the error:
Error: React.Children.only expected to receive a single React element child.
But if I remove the <a> tags within <Link> components, I can view the pages, but then in the console I'm getting a warning of:
Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>
So what am I doing wrong here?
This issue is due to the space between <Link> tag and <a> tag.
So change your code like,
<div>
<Link href="/"><a> Home </a></Link>
<Link href="/about"><a> About </a></Link>
</div>
Reason for the change:
-> The
<Link>can have only one child node and here the space between thelinkandatag are considered as a child nodes.-> So there are two child nodes (One is space and another is
<a>tag) which is invalid and hence such error occurs.
I had the same issue as I was doing:
<Link href={`/tutorial/${tutorial.slug}`}>{tutorial.title}</Link>
The fix was to wrap it in an a tag:
<Link href={`/tutorial/${tutorial.slug}`}><a>{tutorial.title}</a></Link>
I had a space that was considered as an undefined component
<Link href={to}><a className={'abc'}>{children}</a> </Link>
Removing the space, it was ok. 30 minutes lost only, thanks to experience and internet help.
Space between < Link > and < a > makes you error "Unhandled Runtime Error
Error: Multiple children were passed to 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."
Remove the space and it work fine.
import Link from "next/link";
const NavBar = () => {
return (
<nav>
<Link href="/"><a>Home </a></Link>
<Link href="/About"><a>About </a></Link>
<Link href="/Contact"><a>Contact </a></Link>
</nav>
)
}
export default NavBar