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，但是链接导致页面重新加载。预先感谢。

Answer 1

缺少as组件的Link属性。 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动态链接导致页面重新加载

1 个答案: