NextJS 13动态路由失效：app目录下路由渲染异常如何修复？

核心问题出在布局组件的写法错误：你在父布局blogs/layout.jsx里硬编码渲染了BlogPage，导致所有子路由（包括blogs/[id]）都会强制显示这个组件的内容，完全覆盖了子路由自身的页面输出。NextJS 13 App目录的布局逻辑要求用children props来渲染子路由的内容，而非直接引入子页面组件。

具体修复步骤： #

1. 修正src/app/blogs/layout.jsx
   移除硬编码的BlogPage导入和渲染，改用children传递子路由内容：

import PageTitle from '../components/Title/page-title';

export default function BlogLayout({ children }) {
  const blogTitle = "My Blog"
  return (
    <>
        <PageTitle title={blogTitle} />
        {children}
    </>
  )
}

2. 修正src/app/blogs/[id]/layout.jsx
   同样去掉硬编码的页面导入，用children渲染子页面：

import PageTitle from '../../components/Title/page-title';

export default function DynamicBlogLayout({ children }) {
  const blogTitle = "BlogPageMain Blog"
  
  return (
    <>
        <PageTitle title={blogTitle} />
        {children}
    </>
  )
}

为什么之前会出现日志打印但页面不显示的情况？ #

blogs/[id]/page.jsx确实被服务端正确执行了（所以终端能看到console.log输出），但它的JSX输出被父布局里硬编码的BlogPage完全覆盖，导致前端始终显示父路由的页面内容。

内容的提问来源于stack exchange，提问作者tribelord