Next.js: Error: React.Children.only expected to receive a single React element child

Question

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?

Solution 1

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 the link and a tag 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.

Solution 2

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

Solution 3

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>

Solution 4

I was having the same issue there were no problems with spaces rather I was passing an integer inside Link

    <Link href={{
           pathname: `/dashboard/people`,
          query: { idPerson: 123 }}}>
       {123}
   </Link>

I resolved this error by parsing the integer using toString() method

    <Link href={{
         pathname: `/dashboard/people`,
         query: { idPerson: 123 }}}>
      {(123).toString()}
   </Link>

View more solutions

Comments

[Panther]

Looks good. Are you sure you are receiveng the children error here and not somewhere else..

[Maniraj Murugan]

Remove the space between Link tag and a tag.. And give it like, <Link href="/"><a> Home </a></Link> <Link href="/about"><a> About </a></Link>

[Ashan Priyadarshana]

yes @Panther, If I remove those <a> tags, I can render my pages without errors. Having them won't even show me pages in the browser. But if i remove those <a> tags, I can see the pages, but in the console I get the above warning.

[Panther]

good catch @ManirajMurugan

[Ashan Priyadarshana]

wow thanks @ManirajMurugan, It solved the issue. But that's strange having a space causing that issue. Now I Even tried having <a>s in seperate lines too, that also didn't cause any issue. Any way thanks :)

[Maniraj Murugan]

@AshanPriyadarshana, The next line is not considered as a space but if there is a space between both the tags then that is considered as child node(s) .. Posted answer with explanation with reason of removing white space between.. Hope it helps..

[Vaasu Dhand]

I had a comment inside the Link tag, and then that was being considered as a Child Node, breaking my whole app. Weird Stuff...

[velkoon]

In my case I think the culprit was a space after a tag, followed by a note: (</div> {/* So what this does is... */}) THANK YOU. Those <React.Fragment>/<></> and <TransitionGroup> tags were not doing the trick

[Jtaw Cañada]

I was able to solve it with this solution, but I still need more clarification as to why spaces are considered as child nodes.