nextjs 动态 link 导致页面重新加载

Question

我是 nextjs 的新手，正在尝试列出博客并单击博客，应该加载带有动态 URL blog/[slug].js 的页面，但是使用 Link 和 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;

博客/[slug].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，但不知何故 Link 导致页面重新加载。提前致谢。

Answer 1

Link 组件缺少 as 属性。 dynamic pages.

需要

...etc

const renderBlogs = blogs => (
  blogs.map(({ id, slug, title }) => (
    <Link key={id} href="/blog/[slug]" as={`/blog/${slug}`} >
      <a>{title}</a>
    </Link>
  )            
);

...etc

nextjs 动态 link 导致页面重新加载

nextjs dynamic link causes page reload

dynamic-url

page-refresh

next.js