Tengo un componente llamado Nav dentro del directorio de components y su código es algo como lo siguiente:
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;Esto me da el error:
Error: React.Children.only expected to receive a single React element child.
Pero si elimino las etiquetas <a> dentro de los componentes <Link> , puedo ver las páginas, pero luego en la consola recibo una advertencia de:
Warning: You're using a string directly inside <Link>. This usage has been deprecated. Please add an <a> tag as child of <Link>
Entonces, ¿qué estoy haciendo mal aquí?
Este problema se debe al espacio entre la etiqueta <Link> y la etiqueta <a> .
Así que cambia tu código como,
<div> <Link href="/"><a> Home </a></Link> <Link href="/about"><a> About </a></Link> </div>Motivo del cambio:
-> El
<Link>solo puede tener un nodo secundario y aquí el espacio entre ellinkyaetiqueta se consideran nodos secundarios.-> Entonces, hay dos nodos secundarios (uno es el espacio y otro es la etiqueta
<a>) que no es válido y, por lo tanto, se produce dicho error.
Tuve el mismo problema que estaba haciendo:
<Link href={`/tutorial/${tutorial.slug}`}>{tutorial.title}</Link> La solución fue envolverlo en a etiqueta:
<Link href={`/tutorial/${tutorial.slug}`}><a>{tutorial.title}</a></Link>Tenía un espacio que se consideraba como un componente indefinido
<Link href={to}><a className={'abc'}>{children}</a> </Link>Eliminando el espacio, estuvo bien. Solo 30 minutos perdidos, gracias a la experiencia y la ayuda de internet.
El espacio entre < Enlace > y < a > genera el error "Error de tiempo de ejecución no controlado: se pasaron varios elementos secundarios con href de / pero solo se admite un elemento secundario https://nextjs.org/docs/messages/link-multiple-children Abra la consola de su navegador para ver el seguimiento de la pila de componentes".
Retire el espacio y funciona bien.
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