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

Question

我有一个名为 Nav 的组件里面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>

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

Answer 1

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

因此更改您的代码，例如，

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

变更原因:

-> The <Link> can have only one child node and here the space between the link and a tag are considered as a child nodes.

-> So there are two child nodes (One is space and another is <a> tag) which is invalid and hence such error occurs.