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

Question

我正在使用 NextJS。我正在研究布局。在我的布局中有一些带有链接的导航组件。当我尝试创建带有锚点的链接时，我的控制台 returns me :

Nextjs - Reactjs - Invariant Violation: React.Children.only expected to receive a single React element child

不过这只是 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>

但是，我收到了一个警告：

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 元素之前有一个 space。这意味着 link 有两个子节点：一个文本节点（其中包含 space）和 a 元素。删除 space:

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

Nextjs - Reactjs - Links patterns - Invariant Violation: React.Children.only expected to receive a single React element child