Next.js 13中如何结合布局实现动态路由？

在Next.js 13的App Router体系中，页面组件有严格的命名和目录规则，你遇到的问题是因为动态路由的文件结构不符合规范，导致无法复用dashboard的布局。

正确的实现步骤： #

1. 调整动态路由的文件结构
   将你创建的app/dashboard/[id].jsx重命名并调整为：app/dashboard/[id]/page.jsx。App Router要求所有页面组件必须命名为page.jsx（或page.tsx），动态路由参数通过文件夹名称（[id]）来定义。

2. 在页面中获取动态参数id
   在app/dashboard/[id]/page.jsx中，通过组件的params参数获取路由中的id值，示例代码：

   export default function DashboardDetailPage({ params }) {
     return (
       <div>
         <h1>仪表盘详情页</h1>
         <p>当前ID：{params.id}</p>
       </div>
     );
   }
   

3. 确认布局文件存在
   确保app/dashboard/layout.jsx已正确创建，该布局会自动作用于dashboard目录下的所有子页面（包括[id]目录中的页面），示例布局：

   export default function DashboardLayout({ children }) {
     return (
       <div className="dashboard-layout">
         <aside>仪表盘侧边栏</aside>
         <main>{children}</main>
       </div>
     );
   }
   

这样调整后，动态路由页面就能正常复用dashboard的布局，同时正确获取路由参数id。

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