Next.js：错误：React.Children.only 期望接收单个 React 元素子元素

Question

我有一个名为Navinsidecomponents目录的组件，它的代码如下所示：

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;

这给了我错误：

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

但是如果我删除组件中的<a>标签<Link>，我可以查看页面，但是在控制台中我收到警告：

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

那么我在这里做错了什么？

Answer 1

这个问题是由于标签和标签之间的空间造成的。<Link><a>

所以改变你的代码，

        <div>
            <Link href="/"><a> Home </a></Link>
            <Link href="/about"><a> About </a></Link>
        </div>

变更原因：

-><Link>只能有一个子节点，这里link和a标签之间的空间被视为子节点。

-> 所以有两个子节点（一个是空间，另一个是<a>标签）是无效的，因此会发生这样的错误。

Answer 2

< Link > 和 < a > 之间的空格会导致错误“未处理的运行时错误错误：多个子项已传递给hrefof/但仅支持一个子项https://nextjs.org/docs/messages/link-multiple-children 打开您的浏览器的控制台来查看组件堆栈跟踪。”

去掉空格就可以正常工作了。

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

Answer 3

我遇到了与我所做的相同的问题：

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

解决方法是将其包装在a标签中：

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