nextjs：多个子项被传递到 <Link>，其中“href”为“x”，但仅支持一个子项

Question

我没有将多个子项传递给链接，为什么会收到此错误？href错误是：“使用of传递了多个子项/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>
          </>    
    )

Answer 1

用一个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>

Answer 2

我没有看到你的代码有什么问题。

你确定你的源文件中是这样写的吗？<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>