Next.js：错误：React.Children.only 预期接收单个 React 元素子项答案

【问题标题】：Next.js: Error: React.Children.only expected to receive a single React element childNext.js：错误：React.Children.only 预期接收单个 React 元素子项
【发布时间】：2020-08-22 09:04:03
【问题描述】：

我在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>

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

【问题讨论】：

看起来不错。你确定你在这里收到了孩子的错误，而不是在其他地方......
删除Link标签和a标签之间的空格。然后给它，<Link href="/"><a> Home </a></Link> <Link href="/about"><a> About </a></Link>
哇谢谢@ManirajMurugan，它解决了这个问题。但这很奇怪有一个空间导致这个问题。现在我什至尝试将也放在单独的行中，这也没有引起任何问题。无论如何谢谢:)
@AshanPriyadarshana，下一行不被视为空格，但如果两个标签之间有空格，则被视为子节点 .. 已发布答案并附有删除原因的解释之间的空白..希望它有所帮助..
我在 Link 标签中有一个评论，然后它被认为是一个子节点，破坏了我的整个应用程序。奇怪的东西...

标签： javascript html reactjs frontend next.js

【解决方案1】：

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

所以改变你的代码，

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

更改原因：

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

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

【讨论】：

在我的情况下，我认为罪魁祸首是标签后的空格，然后是注释：(</div> {/* So what this does is... */}) 谢谢。那些 <React.Fragment>/<></> 和 <TransitionGroup> 标签并没有起到作用
我能够用这个解决方案解决它，但我仍然需要更多地说明为什么将空间视为子节点。

【解决方案2】：

和之间的空格会让你出错“未处理的运行时错误错误：多个孩子被传递给 href 的 / 但只支持一个孩子 https://nextjs.org/docs/messages/link-multiple-children 打开浏览器的控制台以查看组件堆栈跟踪。” 删除空间，它工作正常！！！

       import Link from "next/link";

const NavBar = () => { 返回（

       <Link href="/"><a>Home </a></Link>
       <Link href="/About"><a>About </a></Link>
        <Link href="/Contact"><a>Contact </a></Link>
    </nav>
)

}

导出默认导航栏

【讨论】：

【解决方案3】：

我遇到了同样的问题：

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

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

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

【讨论】：

【解决方案4】：

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

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

删除空间，没关系。多亏了经验和互联网帮助，仅损失了 30 分钟。

【讨论】：