Next.js：错误：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?

Answer 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.

Answer 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

Answer 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>

Answer 4

If the child is <a> tag then add legacyBehavior . it will work

import Link from 'next/link'

function Legacy() {
  return (
    <Link href="/about" legacyBehavior>
      <a>About Us</a>
    </Link>
  )
}

export default Legacy

Answer 5

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>

Answer 6

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.

Answer 7

Im following the NextJs tutorial and space is not only the culprit. Semi colon also.

// without space, this will also not work because of the semi-colon
    function FirstPost() {
      return (
        <>
          <h1> First Post </h1>
          <h2>
            <Link href="/">
              <a>Back to Home</a>;
            </Link>
          </h2>
        </>
      );

// with space but without semi-colon
function FirstPost() {
  return (
    <>
      <h1> First Post </h1>
      <h2>
        <Link href="/">
          <a> Back to Home </a>
        </Link>
      </h2>
    </>
  );
}

Answer 8

This error also gets fired when there's no content in between <Link> opening and closing tags.

For example:

<Link href='/'></Link> // i am an error :3