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