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

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?

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>