错误：使用"<Link>/posts"的"href"传递了多个子项，但仅支持一个子项

Question

我得到这个错误，我有问题确定来源。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。是什么导致了这个错误?

Answer 1

解决方案

我的Home()页有一个<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>。