Penghalaan dinamik dalam NextJS 13 tidak berfungsi seperti yang diharapkan. Bagaimana untuk menjadikannya berfungsi?

Question

Saya cuba menggunakan penghalaan dinamik supaya URI mempunyai blogs/id/ dalam projek NextJS 13 di mana bahagian id harus dinamik tetapi nampaknya tidak berfungsi. Nampaknya halaman yang sepadan dengan blog sentiasa dipaparkan.

Saya menggunakan Direktori Aplikasi Eksperimen dari 13 Seterusnya untuk projek ini dan saya mempunyai laluan blogs，我通过创建 layout.jsx 和 来设置它src/app/blogs/ 目录中的 >page.jsx.

Saya perasan src/app/blogs/[id]/page.jsx中的控制台日志语句显示在服务器端控制台中。即终端（不是浏览器控制台）。但是，return语句中对应的JSX并没有渲染。相反，与 blogs bahawa JSX yang sepadan sedang diberikan.

Kod JSX dalam projek:

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>
    
      }

Butiran projek dan persekitaran:

-Seterusnya v13.3.0

- Tailwindcss v3.3.1

- Nod v18.15.0

- benang v1.22.19

- Ubuntu 22 (Linux)

Skrin skrin untuk rujukan:

Screenshot blog/2 untuk rujukan

Tangkapan skrin bahagian hadapan untuk rujukan

Saya telah membaca dokumentasi rasmi beberapa kali tetapi saya tidak dapat memahami apa yang berlaku di sini dan mengapa ia tidak dipaparkan dengan betul. Sebarang bantuan amatlah dihargai.

Answer 1

Hei, masalah yang saya lihat di sini ialah bukan penghalaan dinamik, tetapi layout.jsx.

Anda harus membuat kanak-kanak itu dan bukannya memaparkan halaman secara manual.

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}
        </>
      )
    }

Maklumat lanjut

• Kandungan halaman dihantar secara automatik ke layout.jsx yang terdekat Sebagai contoh, jika anda cuba mengakses http://localhost:3000/blogs reka letak dalam apl/blog akan dipaparkan
• Jika anda cuba mengakses http://localhost:3000/blogs/1, reka letak di dalam app/blogs/[id] akan dipaparkan
• Saya tidak tahu kes penggunaan, tetapi hanya untuk memberikan maklumat apabila susun atur tidak wujud dalam app/blogs/[id] semasa mengakses http://localhost:3000/blogs/1 dalam hal ini ia akan memaparkan Yang paling hampir, ia akan berada dalam apl/blog yang bermaksud kita tidak memerlukan berbilang susun atur

Untuk rujukan

• Halaman dan Reka Letak - https://nextjs .org/docs/app/building-your-application/routing/pages-and-layouts
• Kumpulan Penghalaan - https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts