时间戳

首页 > 解决方案 > nextjs：多个孩子被传递给了“x”的“href”，但只支持一个孩子

next.js - nextjs：多个孩子被传递给了“x”的“href”，但只支持一个孩子

问题描述

我没有将多个孩子传递给链接，为什么会出现此错误？错误是：“多个孩子被传递给了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>
          </>    
    )

标签： next.js

解决方案

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

你确定这就是它在你的源文件中的写法吗？如果在<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>

推荐阅读