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

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?

javascripthtmlreactjsfrontendnext.js


Solution 1:[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:[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:[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:[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>

Solution 5:[5]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maniraj Murugan
Solution 2 Zorayr
Solution 3 deadcoder0904
Solution 4 Abdullah Ansari
Solution 5 Nicolas Zozol

Related Questions