vercel/next.js · error · Error

Multiple children were passed to <Link> with `href` of `${hr

Error message

Multiple children were passed to <Link> with `href` of `${hrefProp}` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children

What it means

Pages-router Link with legacyBehavior throws when more than one child is passed: React.Children.only fails because the Link must wrap exactly one child element to attach its navigation props. On the client, a note about viewing the component stack in the browser console is appended.

Source

Thrown at packages/next/src/client/link.tsx:518

        if (onClick) {
          console.warn(
            `"onClick" was passed to <Link> with \`href\` of \`${hrefProp}\` but "legacyBehavior" was set. The legacy behavior requires onClick be set on the child of next/link`
          )
        }
        if (onMouseEnterProp) {
          console.warn(
            `"onMouseEnter" was passed to <Link> with \`href\` of \`${hrefProp}\` but "legacyBehavior" was set. The legacy behavior requires onMouseEnter be set on the child of next/link`
          )
        }
        try {
          child = React.Children.only(children)
        } catch (err) {
          if (!children) {
            throw new Error(
              `No children were passed to <Link> with \`href\` of \`${hrefProp}\` but one child is required https://nextjs.org/docs/messages/link-no-children`
            )
          }
          throw new Error(
            `Multiple children were passed to <Link> with \`href\` of \`${hrefProp}\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children` +
              (typeof window !== 'undefined'
                ? " \nOpen your browser's console to view the Component stack trace."
                : '')
          )
        }
      } else {
        child = React.Children.only(children)
      }
    } else {
      if (process.env.NODE_ENV === 'development') {
        if ((children as any)?.type === 'a') {
          throw new Error(
            'Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.\nLearn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor'
          )
        }
      }
    }

View on GitHub (pinned to 0eb3775416)

Solutions

1. Pass only one child element to <Link>.

When it happens

Trigger: <Link> in pages router receives multiple children.

Common situations: Passing multiple child elements to Link in the pages directory.

AI-assisted analysis of vercel/next.js@0eb3775416 (2026-08-19). Data as JSON: /api/errors/bb3faab12245d0f4. Report an issue: GitHub.