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

我有一个名为Nav inside components目录及其代码如下所示：

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>

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

这个问题是由于space之间<Link>标签和<a> tag.

所以改变你的代码，比如

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

变更原因：

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

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