错误：使用 `/posts` 的 `href` 将多个孩子传递给 <Link> 但只支持一个孩子答案

【问题标题】：Error: Multiple children were passed to <Link> with `href` of `/posts` but only one child is supported错误：使用 `/posts` 的 `href` 将多个孩子传递给 <Link> 但只支持一个孩子
【发布时间】：2021-12-04 14:38:53
【问题描述】：

我收到此错误，并且在识别来源时遇到问题。 Next.js 参考说，如果子组件是自定义组件，我可以强制将链接传递给 <a> 标签。

代码如下：

import Link from 'next/link'

function PostList({ posts }) {
  return (
    <>
      <h1>List of Posts</h1>
      {posts.map((post) => {
        return (
          <div key={post.id}>
            <Link href={`posts/${post.id}`} passHref>
              <h2>
                {post.id} {post.title}
              </h2>
            </Link>
            <hr />
          </div>
        )
      })}
    </>
  )
}

export default PostList

export async function getStaticProps() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  const data = await response.json()

  return {
    props: {
      posts: data.slice(0, 3),
    },
  }
}

我将passHref 传递给Link。什么可能导致此错误？

【问题讨论】：

<h2> 不太可能你也可以通过Href。我不认为你想要 pass href 属性。该属性适用于链接内的组件呈现 <a> 标记时。
@nlta 这很有趣，因为我正在关注本教程并且它在这里有效。 youtube.com/…
@nlta 不适用于 <a> 标签，甚至当我删除 <h2> 标签时。事情正在发生。

标签： reactjs next.js jsx

【解决方案1】：

解决方案

我的Home()page 在错误的地方有一个<a> 标签。

import Link from 'next/link'

function Home() {
  return (
    <>
      <h1>Next JS pre-rendering</h1>
      <Link href="/users">
        <a>Users</a>
      </Link>
      <Link href="/posts">
        <a>Posts</a>
      </Link>
    </>
  )
}

export default Home

我在<Link> 标记之后有<a>Posts</a>。

【讨论】：