Je suis nouveau sur nextjs et j'essaie de répertorier les blogs et en cliquant sur le blog, la page avec l'URL dynamique blog/[slug].js devrait se charger, mais l'utilisation de Link et de Router.push( ") recharge la page.

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;

blog/[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

J'essaie de charger [slug].js sans recharger, mais d'une manière ou d'une autre, Link provoque le rechargement de la page. Merci d'avance.

0
Bhavik Chavda 7 sept. 2020 à 20:33

1 réponse

Meilleure réponse

Manque l'accessoire as pour le composant Link. Obligatoire pour les pages dynamiques.

...etc

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

...etc
1
Matt Carlotta 7 sept. 2020 à 17:56