NextJS 13 中的动态路由未按预期工作。如何让它发挥作用？

Question

我正在尝试使用动态路由，这样 URI 在 NextJS 13 项目中具有 blogs/id/ ，其中 id 部分应该是动态的，但它似乎不起作用。似乎总是显示博客对应的页面。

我在这个项目中使用了 Next 13 中的实验应用程序目录，并且我有一个路由 blogs，我通过创建 layout.jsx 和 来设置它src/app/blogs/ 目录中的 >page.jsx。

我注意到src/app/blogs/[id]/page.jsx中的控制台日志语句显示在服务器端控制台中。即终端（不是浏览器控制台）。但是，return语句中对应的JSX并没有渲染。相反，与 blogs 对应的 JSX 正在被渲染。

项目中的JSX代码：

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

项目和环境详细信息：

- 下一个 v13.3.0

- Tailwindcss v3.3.1

- 节点 v18.15.0

- 纱线 v1.22.19

- Ubuntu 22（Linux）

截图供参考：

博客/二的截图供参考

前端截图供参考

我已经阅读了官方文档几次，但我无法理解这里出了什么问题以及为什么它无法正确渲染。非常感谢任何帮助。

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