next.js - 下一个 : Multiple children were passed to with `href` of 'x' but only one child is supported

Question

我没有将多个 child 传递给链接，为什么会出现此错误？错误是:“通过 /post/61703ea640ff7eef1e1e7e75 的 href 传递给多个 child ，但只支持一个 child ”

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>