我正在尝试使用动态路由，这样 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）

截图供参考：

博客/二的截图供参考

前端截图供参考

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