如何将 Next.js Link 与多个孩子一起使用？答案

【问题标题】：How to use Next.js Link with multiple children?如何将 Next.js Link 与多个孩子一起使用？
【发布时间】：2022-02-10 07:29:34
【问题描述】：

如何在 Next.js 中使用 Link 并在此 <div> 中使用多个 <div>？我有 Link 的 img 标签，链接的段落，链接的标题。

错误：多个子代以href 传递给 /article 但只支持一个孩子 https://nextjs.org/docs/messages/link-multiple-children 打开你的浏览器的控制台以查看组件堆栈跟踪。

<Link href="/article" title="">
      <div >
          <h4>{props.featurename}</h4>
          <a href="/author"><h3>{props.featuredesc}</h3></a>
      </div>
      <div className="img-entry">
          <Image src="/images/more-img.png" width={265} height={290} title="" alt="" />
      </div>
</Link>

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

使用片段将多个元素组合到一个主子元素下，这些元素在树中不可见。 (https://reactjs.org/docs/fragments.html#gatsby-focus-wrapper)

      <Link ***href***="/article" title="">
       <>
        <div >
          <h4>{props.featurename}</h4>
          <a href="/author"><h3>{props.featuredesc}</h3></a>
        </div>
        <div className="img-entry">
          <Image src="/images/more-img.png" width={265} height={290} title="" alt="" />
        </div>
       </>
      </Link>

【讨论】：

是的，谢谢它的工作......！！！