nextjs: 多个子节点被传递给 <Link> 且 `href` 为 'x' 但只支持一个子节点

我没有将多个孩子传递给链接,为什么会出现此错误?错误是:“使用 href/post/61703ea640ff7eef1e1e7e75 传递了多个孩子,但只支持一个孩子”

return (
        <>
        {head()}
        <div className="container-fluid"
        style={{
            backgroundImage: "url( "+ "/images/default.jpg"+ ")",
            backgroundAttachment: "fixed",
            padding: "100px 0px 75px 0px",
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
            display: 'block'
        }}>
                <h1 className="display-1 font-weight-bold text-center py-5">MERNCAMP</h1>
        </div>
        <div className="container">
        <div className="row pt-5">
          {posts.map((post) => (
            <div key={post._id} className="col-md-4">
              <Link href={`/post/view/${post._id}`}>
                <a>
                  <PostPublic key={post._id} post={post} />
                </a>
              </Link>
            </div>
          ))}
        </div>
      </div>
          </>    
    )
stack overflow nextjs: Multiple children were passed to <Link> with `href` of 'x' but only one child is supported
原文答案

答案:

作者头像

用一个 div 包裹整个链接

<Link key={post._id} href={`/post/${post.slug.current}`}>
            <div>
              <div>
                <img src={urlFor(post.mainImage).url()} alt=''></img>
              </div>
              <div>
                <p>{post.title}</p>
                <p>
                  {post.description} by {post.author.n`enter code here`ame}
                </p>
              </div>
              <img src={urlFor(post.author.image).url()!} alt=''></img>
            </div>
 </Link>
作者头像

我看不出你的代码有什么问题。

你确定这就是它在你的源文件中的写法吗?如果 <Link><a> 标记之间有空格,通常会发生此错误。

例子:

...
{posts.map((post) => (
  <div key={post._id} className="col-md-4">
    <Link href={`/post/view/${post._id}`}> <a>
      <PostPublic key={post._id} post={post} />
    </a></Link>
  </div>
))}

您会在 <Link href={ `/post/view/${post._id}` }> <a> 中的标签之间看到空格

作者头像

我知道为时已晚,但以防万一……

我遇到了同样的错误,我通过重新启动开发服务器来解决,我知道这很愚蠢但对我有用。

另外,请确保您的组件 <PostPublic /> 内部没有 Link ,我的理论可能是嵌套链接到您的主链接子被映射。希望可以帮助任何人。