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?

Looks good. Are you sure you are receiveng the children error here and not somewhere else.. — Panther
– Panther, Commented May 7, 2020 at 6:49
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> — Maniraj Murugan
– Maniraj Murugan, Commented May 7, 2020 at 6:51
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 :) — Ashan Priyadarshana
– Ashan Priyadarshana, Commented May 7, 2020 at 6:56
@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.. — Maniraj Murugan
– Maniraj Murugan, Commented May 7, 2020 at 7:04
I had a comment inside the Link tag, and then that was being considered as a Child Node, breaking my whole app. Weird Stuff... — Vaasu Dhand
– Vaasu Dhand, Commented Mar 9, 2021 at 13:50

Maniraj Murugan · Accepted Answer · 2020-05-07 07:02:45Z

84

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.

answered May 7, 2020 at 7:02

Maniraj Murugan

9,11424 gold badges77 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

velkoon Over a year ago

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 Over a year ago

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

Zorayr · Accepted Answer · 2022-02-02 23:42:07Z

7

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

edited Feb 2, 2022 at 23:42

Zorayr

25.1k9 gold badges148 silver badges139 bronze badges

answered Sep 23, 2021 at 7:27

Ani David

1411 silver badge8 bronze badges

Comments

deadcoder0904 · Accepted Answer · 2021-06-29 11:50:06Z

5

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>

answered Jun 29, 2021 at 11:50

deadcoder0904

8,98118 gold badges93 silver badges214 bronze badges

Comments

Siddhartha Mukherjee · Accepted Answer · 2022-11-17 20:40:02Z

2

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

answered Nov 17, 2022 at 20:40

Siddhartha Mukherjee

2,9712 gold badges27 silver badges30 bronze badges

Comments

Nicolas Zozol · Accepted Answer · 2021-09-06 20:02:27Z

1

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.

answered Sep 6, 2021 at 20:02

Nicolas Zozol

7,0784 gold badges55 silver badges75 bronze badges

Comments

Abdullah Ansari · Accepted Answer · 2022-04-21 04:59:36Z

1

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>

answered Apr 21, 2022 at 4:59

Abdullah Ansari

7301 gold badge4 silver badges10 bronze badges

Comments

Chris Perry · Accepted Answer · 2022-10-26 23:08:56Z

1

Check if inner content is empty

In addition to the scenarios covered by other answers, 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

edited Oct 26, 2022 at 23:08

answered Sep 23, 2022 at 18:44

Chris Perry

8,1643 gold badges15 silver badges25 bronze badges

Comments

CopyLeft · Accepted Answer · 2024-03-21 14:11:47Z

I landed here because I was having a similar issue in my Next.js app, but I would get a 500 error in browser console and the React.Children.only error in my terminal whenever I refreshed manually refreshed my app on any page.

The terminal output would provide a huge stack trace that pointed to next-server in my node_modules (node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js).

As it turns out, I was using styled-components with a boilerplate Next.js app setup by NX, and in my global app layout (src/app/layout.tsx), I had the StyledComponentsRegistry component as a parent of my main application, like so:

const RootLayout = ({ children }) => (
  <html lang="en">
    <body>
      <StyledComponentsRegistry>
        <>
          <div>header</div>
          <div>main content</div>
          <div>footer</div>
        </>
      </StyledComponentsRegistry>
    </body>
  </html>
);

It turns out that React.Children.only, and by extension StyledComponentsRegistry, did not consider the Fragment (<>) the child component since it's not rendered in the DOM when the page is built.

So instead, I replaced the wrapping Fragment (<>) with a div (<div>) and the error went away!

In other words, it looked like:

const RootLayout = ({ children }) => (
  <html lang="en">
    <body>
      <StyledComponentsRegistry>
        <div> {/* changed this <> to a <div> */}
          <div>header</div>
          <div>main content</div>
          <div>footer</div>
        </div> {/* changed this </> to a </div> */}
      </StyledComponentsRegistry>
    </body>
  </html>
);

(Hope this helps someone, and sorry to piggyback off an only somewhat related issue! There were no other questions addressing mine out there.)

Zowy · Accepted Answer · 2022-07-27 15:59:58Z

0

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 will not also work
function FirstPost() {
  return (
    <>
      <h1> First Post </h1>
      <h2>
        <Link href="/">
          <a> Back to Home </a>
        </Link>
      </h2>
    </>
  );
}

edited Jul 27, 2022 at 15:59

answered Jul 24, 2022 at 11:36

Zowy

648 bronze badges

Collectives™ on Stack Overflow

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

9 Answers 9

2 Comments

Comments

Comments

Comments

Comments

Comments

Check if inner content is empty

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

Comments

Comments

Comments

Comments

Comments

Check if inner content is empty

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related