Das dynamische Routing in NextJS 13 funktioniert nicht wie erwartet. Wie soll es funktionieren?

Question

Ich versuche, dynamisches Routing zu verwenden, damit der URI blogs/id/ in einem NextJS 13-Projekt hat, in dem der ID-Teil dynamisch sein sollte, aber es scheint nicht zu funktionieren. Es scheint, dass immer die Seite angezeigt wird, die dem Blog entspricht.

Ich verwende für dieses Projekt das Experimental Application Directory von Next 13 und habe eine Route blogs，我通过创建 layout.jsx 和 来设置它src/app/blogs/ 目录中的 >page.jsx.

Mir ist aufgefallen src/app/blogs/[id]/page.jsx中的控制台日志语句显示在服务器端控制台中。即终端（不是浏览器控制台）。但是，return语句中对应的JSX并没有渲染。相反，与 blogs, dass das entsprechende JSX gerendert wird.

JSX-Code im Projekt:

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

Projekt- und Umgebungsdetails:

-Nächste v13.3.0

- Tailwindcss v3.3.1

- Knoten v18.15.0

- Garn v1.22.19

- Ubuntu 22 (Linux)

Screenshot als Referenz:

Screenshots von Blog/2 als Referenz

Front-End-Screenshots als Referenz

Ich habe die offizielle Dokumentation ein paar Mal gelesen, kann aber nicht verstehen, was hier falsch läuft und warum sie nicht richtig gerendert wird. Jede Hilfe wird sehr geschätzt.

Answer 1

嘿，我在这里看到的问题是不是 动态路由，而是layout.jsx。

您应该渲染子级，而不是手动渲染页面。

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

更多信息

• 页面内容会自动传递到最近的layout.jsx 例如，如果您尝试访问http://localhost:3000/blogs应用/博客内的布局将被渲染
• 如果您尝试访问http://localhost:3000/blogs/1，app/blogs/[id]内的布局将被渲染
• 我不知道用例，但只是为了在访问 http://localhost:3000/blogs 时 app/blogs/[id] 中不存在布局时提供信息/1 在这种情况下，它将渲染最接近的一个，它将位于 app/blogs 中，这意味着我们不需要多个布局

供参考

• 页面和布局 - https://nextjs .org/docs/app/building-your-application/routing/pages-and-layouts
• 路由组 - https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts