nextjs动态链接导致页面重新加载。
nextjs动态链接导致页面重新加载。
提问于 2020-09-07 17:33:12
我对nextjs很陌生，我试着列出博客，在点击博客时，带有动态URL /slg.js的页面应该加载，但是使用链接和Router.push(")重新加载页面。
blogs.js
import Link from 'next/link';
const renderBlogs = (blogs) => {
return blogs.map(blog => <Link href={`/blog/${blog.slug}`}>
<a key={blog.id}>{blog.title}</a>
</Link>
)
}
function Myblogs(props) {
let blogs = [
{ id: 1, title: "blog 1", slug: "blog-1" },
{ id: 2, title: "blog 2", slug: "blog-2" }
]
return renderBlogs(blogs);
}
export default Myblogs;博客/slg.js
import { useRouter } from 'next/router'
const SingleBlog = (props) => {
const router = useRouter()
const slug = router.query.slug
return <>
<h3>Single Blog</h3>
<p>{slug}</p>
</>
}
export default SingleBlog我试图在没有重新加载的情况下加载slug.js，但是链接会导致页面重新加载。提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-07 17:56:30
缺少了as组件的Link支柱。动态页面所需。
...etc
const renderBlogs = blogs => (
blogs.map(({ id, slug, title }) => (
<Link key={id} href="/blog/[slug]" as={`/blog/${slug}`} >
<a>{title}</a>
</Link>
)
);
...etc页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63781971
复制相关文章
相似问题
腾讯云开发者
