Next.js: Fehler: React.Children.only erwartet, ein einzelnes untergeordnetes React-Element zu erhalten

Lesezeit: 4 Minuten

Ich habe eine Komponente namens Nav Innerhalb components Verzeichnis und sein Code sieht so aus:

import Link from 'next/link';

const Nav = () => {
    return(
        <div>
            <Link href="https://stackoverflow.com/">  <a> Home </a> </Link>
            <Link href="http://stackoverflow.com/about"> <a> About </a>  </Link>
        </div>
    )
}

export default Nav;

Dies gibt mir den Fehler:

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

Aber wenn ich die entferne <a> Tags drin <Link> Komponenten kann ich die Seiten anzeigen, aber dann erhalte ich in der Konsole eine Warnung von:

Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>

Also was mache ich hier falsch?

Dieses Problem ist auf die Platz zwischen <Link> Etikett und <a> Schild.

Also ändern Sie Ihren Code wie,

        <div>
            <Link href="https://stackoverflow.com/"><a> Home </a></Link>
            <Link href="http://stackoverflow.com/about"><a> About </a></Link>
        </div>

Grund für die Änderung:

-> Die <Link> kann nur einen untergeordneten Knoten haben und hier das Leerzeichen zwischen den link und a -Tag werden als untergeordnete Knoten betrachtet.

-> Es gibt also zwei untergeordnete Knoten (einer ist Raum und ein anderer ist <a> -Tag), das ungültig ist und daher ein solcher Fehler auftritt.

  • In meinem Fall war der Schuldige meiner Meinung nach ein Leerzeichen nach einem Tag, gefolgt von einer Notiz: (</div> {/* So what this does is... */}) DANKE. Jene <React.Fragment>/<></> und <TransitionGroup> Tags haben nicht funktioniert

    – velkon

    2. Juni 2021 um 17:40 Uhr

  • Ich konnte es mit dieser Lösung lösen, aber ich brauche noch mehr Klärung, warum Leerzeichen als untergeordnete Knoten betrachtet werden.

    – Jtaw Cañada

    14. Juni 2021 um 8:14 Uhr

Benutzer-Avatar
Ani David

Das Leerzeichen zwischen < Link > und < a > erzeugt den Fehler „Unbehandelter Laufzeitfehler Fehler: Mehrere untergeordnete Elemente wurden mit übergeben href von / aber nur ein Kind wird unterstützt https://nextjs.org/docs/messages/link-multiple-children
Öffnen Sie die Konsole Ihres Browsers, um den Stack-Trace der Komponente anzuzeigen.”

Entfernen Sie das Leerzeichen und es funktioniert gut.

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

Ich hatte das gleiche Problem wie ich es tat:

<Link href={`/tutorial/${tutorial.slug}`}>{tutorial.title}</Link>

Die Lösung bestand darin, es in ein einzuwickeln a Schild:

<Link href={`/tutorial/${tutorial.slug}`}><a>{tutorial.title}</a></Link>

Ich hatte einen Raum, der als undefinierte Komponente betrachtet wurde

<Link href={to}><a className={'abc'}>{children}</a> </Link>

Das Entfernen des Leerzeichens war in Ordnung. Nur 30 Minuten verloren, dank Erfahrung und Internethilfe.

Ich hatte das gleiche Problem, es gab keine Probleme mit Leerzeichen, sondern ich übergab eine ganze Zahl Verknüpfung

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

Ich habe diesen Fehler behoben, indem ich die Ganzzahl mit analysiert habe toString() Methode

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

1013770cookie-checkNext.js: Fehler: React.Children.only erwartet, ein einzelnes untergeordnetes React-Element zu erhalten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy