Next.js:错误:React.Children.只应接收单个React元素的子项

Question

我在components目录中有一个名为Nav的组件，它的代码如下：

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.

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

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

<链接>并且<a>让你犯错"；未处理的运行时错误错误：使用/的href传递了多个子项，但仅支持一个子项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>

Answer 4

如果子级是<a>标记，则添加legacyBehavior。它将工作

import Link from 'next/link'
function Legacy() {
return (
<Link href="/about" legacyBehavior>
<a>About Us</a>
</Link>
)
}
export default Legacy

Answer 5

我有一个空间被认为是未定义的组件

<Link href={to}><a className={'abc'}>{children}</a> </Link>

去掉空间，还好。由于经验和网络帮助，只损失了30分钟。

Answer 6

我遇到了同样的问题——没有空格问题，而是在Link内传递了一个整数

<Link href={{
pathname: `/dashboard/people`,
query: { idPerson: 123 }}}>
{123}
</Link>

我通过使用toString((方法解析整数来解决此错误

<Link href={{
pathname: `/dashboard/people`,
query: { idPerson: 123 }}}>
{(123).toString()}
</Link>

Answer 7

检查内部内容是否为空

除了其他答案所涵盖的场景外，当<Link>打开和关闭标记之间没有内容时，也会触发此错误。

例如：

<Link href='/'></Link>  // i am an error

Answer 8

Im遵循NextJs教程，空间不仅仅是罪魁祸首。还有分号。

// without space, this will also not work because of the semi-colon
function FirstPost() {
return (
<>
<h1> First Post </h1>
<h2>
<Link href="/">
<a>Back to Home</a>;
</Link>
</h2>
</>
);
// with space but without semi-colon will not also work
function FirstPost() {
return (
<>
<h1> First Post </h1>
<h2>
<Link href="/">
<a> Back to Home </a>
</Link>
</h2>
</>
);
}