Nextjs - Reactjs - 链接模式 - 不变违规：React.Children.only 预计会收到单个 React 元素子元素答案

【问题标题】：Nextjs - Reactjs - Links patterns - Invariant Violation: React.Children.only expected to receive a single React element childNextjs - Reactjs - 链接模式 - 不变违规：React.Children.only 预计会收到单个 React 元素子元素
【发布时间】：2019-01-17 05:03:19
【问题描述】：

我正在使用 NextJS。我正在做一个布局。在我的布局中有一些导航组件，里面有链接。当我尝试在内部创建带有锚点的链接时，我的控制台会返回：

Nextjs - Reactjs - 不变违规：React.Children.only 预期接收单个 React 元素子元素

不过，这只是 NextJS 的经典模式，这里是我的链接的示例：

<Link href={{pathname:'/blog'}} className={style.links_items}
to="/blog"> <a title="Blog">BLOG -</a></Link>

只有我这样做才有效：

 <Link href={{pathname:'/blog'}} className={style.links_items}
    to="/blog"> BLOG -</Link>

然后，我收到了警告：

您在<Link> 中直接使用了一个字符串。这种用法已经已弃用。请添加<a> 标签作为<Link> 的子标签

如果有人有任何提示，那就太好了，

谢谢

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

链接中a 元素之前有一个空格。这意味着该链接有两个子节点：一个文本节点（其中包含空格）和a 元素。删除空格：

<Link href={{pathname:'/blog'}} className={style.links_items}
to="/blog"><a title="Blog">BLOG -</a></Link>

【讨论】：

如何避免数小时的谷歌搜索，感谢您提供这些有用的信息
@Webman - 幸运的是，当其他人遇到这种情况时，他们会通过搜索找到您的问题和答案。 :-)
我在搜索中找到了这个。删除空间使其工作。我不喜欢我们不能使用空间。为什么会发生这种情况？
@jackblank - 因为那里有空格，所以您指定了两个子节点：一个文本节点和一个 a 元素。这是一个空格很重要的位置。