时间戳

首页 > 解决方案 > Nextjs - Reactjs - 链接模式 - 不变违规：React.Children.only 预计会收到单个 React 元素子元素

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

问题描述

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

Nextjs - Reactjs - Invariant Violation: 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>

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

谢谢

标签： javascriptreactjsnext.js

解决方案

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

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

推荐阅读