Le routage dynamique dans NextJS 13 ne fonctionne pas comme prévu. Comment le faire fonctionner ?

Question

J'essaie d'utiliser le routage dynamique pour que l'URI ait blogs/id/ dans un projet NextJS 13 où la partie id doit être dynamique mais cela ne semble pas fonctionner. Il semble que la page correspondant au blog soit toujours affichée.

J'utilise le répertoire d'applications expérimentales de Next 13 pour ce projet et j'ai un itinéraire blogs，我通过创建 layout.jsx 和 来设置它src/app/blogs/ 目录中的 >page.jsx.

J'ai remarqué src/app/blogs/[id]/page.jsx中的控制台日志语句显示在服务器端控制台中。即终端（不是浏览器控制台）。但是，return语句中对应的JSX并没有渲染。相反，与 blogs que le JSX correspondant est en cours de rendu.

Code JSX dans le projet :

src/app/blogs/layout.jsx

import PageTitle from '../components/Title/page-title';
    import BlogPage from './page.jsx';
    
    export default function BlogLayout() {
      const blogTitle = "My Blog"
      return (
        <>
            <PageTitle title={blogTitle} />
            <BlogPage />
        </>
    
      )
    }

src/app/blogs/page.jsx

function BlogPage() {
    
        return (
            <>
                <p className="blog-text--paragraph prose text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quaerat a possimus, qui expedita iure, ipsum asperiores aliquid eveniet libero vel architecto! Assumenda incidunt dolore molestiae?
                </p>
            </>
            
        );
    }
    
    export default BlogPage;

src/app/blogs/[id]/layout.jsx

import PageTitle from '../../components/Title/page-title';
    import BlogPageMain from '../[id]/page';
    
    export default function DynamicBlogLayout() {
    
    
      const blogTitle = "BlogPageMain Blog"
      
      return (
        <>
            <PageTitle title={blogTitle} />
            <BlogPageMain />
        </>
      )
    }

src/app/blogs/[id]/page.jsx

export default function BlogPageMain({ params, searchParams }) {
    
        console.log("The current ID is:");
        console.log(params.id);
    
        return <div>ID: {params.id}</div>
    
      }

Détails du projet et de l'environnement :

-Suivant v13.3.0

- Tailwindcss v3.3.1

- Nœud v18.15.0

- fil v1.22.19

-Ubuntu 22 (Linux)

Capture d'écran pour référence :

Captures d'écran du blog/2 pour référence

Captures d'écran frontales pour référence

J'ai lu la documentation officielle plusieurs fois mais je n'arrive pas à comprendre ce qui ne va pas ici et pourquoi elle ne s'affiche pas correctement. Toute aide est grandement appréciée.

Answer 1

Hé, le problème que je vois ici n'est pas routage dynamique, mais layout.jsx.

Vous devez restituer l'enfant au lieu de restituer la page manuellement.

src/app/blogs/layout.jsx

 import PageTitle from '../components/Title/page-title';
    
    export default function BlogLayout({children}) {
      const blogTitle = "My Blog"
      return (
        <>
            <PageTitle title={blogTitle} />
            {children}
        </>
    
      )
    }

src/app/blogs/[id]/layout.jsx

   import PageTitle from '../../components/Title/page-title';
    import BlogPageMain from '../[id]/page';
    
    export default function DynamicBlogLayout({children}) {
    
    
      const blogTitle = "BlogPageMain Blog"
      
      return (
        <>
            <PageTitle title={blogTitle} />
            {children}
        </>
      )
    }

Plus d'informations

• Le contenu de la page est automatiquement transmis au layout.jsx le plus proche. Par exemple, si vous essayez d'accéder à http://localhost:3000/blogs la mise en page dans app/blogs sera rendue
• Si vous essayez d'accéder à http://localhost:3000/blogs/1, la mise en page à l'intérieur de app/blogs/[id] sera rendue
• Je ne connais pas le cas d'utilisation, mais juste pour fournir des informations lorsque la mise en page n'existe pas dans app/blogs/[id] lors de l'accès à http://localhost:3000/blogs/1 auquel cas rendra le plus proche, il sera dans app/blogs ce qui signifie que nous n'avons pas besoin de plusieurs mises en page

Pour référence

• Pages et mises en page - https://nextjs .org/docs/app/building-your-application/routing/pages-and-layouts
• Groupes de routage - https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts