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

Question

我正在使用 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>

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

谢谢

Answer 1

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

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