文件系统路由

app/
├─ page.tsx              // 渲染 "/"
├─ about/
│  └─ page.tsx           // 渲染 "/about"
└─ blog/
   ├─ page.tsx           // 渲染 "/blog"
   └─ [slug]/
      └─ page.tsx        // 渲染 "/blog/任意值"，如 /blog/hello

// app/blog/[slug]/page.tsx —— 一个最简 page
export default async function PostPage(
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params      // 16 起 params 是 Promise，必须 await
  return <article>文章：{slug}</article>
}

// app/layout.tsx —— 根 layout，必须存在，要带 <html><body>
export default function RootLayout(
  { children }: { children: React.ReactNode }
) {
  return (
    <html lang="zh">
      <body>{children}</body>     {/* children = 当前匹配到的子树 */}
    </body>
  )
}

// app/dashboard/layout.tsx —— 仪表盘子树共享的 layout
export default function DashboardLayout(
  { children }: { children: React.ReactNode }
) {
  return (
    <div>
      <Sidebar />                 {/* 在 /dashboard/* 之间切换时保持不动 */}
      <main>{children}</main>
    </div>
  )
}

// app/onboarding/template.tsx —— 对照：每次导航重新挂载
export default function OnboardingTemplate(
  { children }: { children: React.ReactNode }
) {
  return <div className="fade-in">{children}</div>  // 进场动画每次重放
}

// app/shop/[category]/[id]/page.tsx → /shop/keyboard/42
export default async function Product(
  { params }: { params: Promise<{ category: string; id: string }> }
) {
  const { category, id } = await params   // 多个动态段都在 params 里
  return <h1>{category} / {id}</h1>
}

// app/[...slug]/page.tsx → /a、/a/b、/a/b/c 都匹配
export default async function CatchAll(
  { params }: { params: Promise<{ slug: string[] }> }
) {
  const { slug } = await params           // slug 是数组：["a","b","c"]
  return <nav>{slug.join(' / ')}</nav>
}

// app/(marketing)/about/page.tsx → URL 仍是 /about
// (marketing) 只用于分组 + 共享 app/(marketing)/layout.tsx，
// 括号那层不进 URL
export default function About() {
  return <h1>关于我们</h1>
}

// app/dashboard/loading.tsx —— 自动成为同级 page 的 Suspense fallback
export default function Loading() {
  return <div>加载仪表盘…</div>     // 数据就绪前显示这个
}

// app/dashboard/error.tsx —— 必须是 Client Component
'use client'                          // ← 漏了这行会报错

export default function Error(
  { error, reset }: { error: Error; reset: () => void }
) {
  return (
    <div>
      <p>出错了：{error.message}</p>
      <button onClick={reset}>重试</button>  {/* reset 重新渲染该段 */}
    </div>
  )
}

// 目录：
// app/dashboard/layout.tsx
// app/dashboard/@analytics/page.tsx   + @analytics/default.tsx
// app/dashboard/@team/page.tsx        + @team/default.tsx

// app/dashboard/layout.tsx —— 具名插槽作为 prop 注入
export default function DashboardLayout({
  children,                 // 对应 app/dashboard/page.tsx
  analytics,                // 对应 @analytics 子树
  team,                     // 对应 @team 子树
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <div>
      {children}
      <section>{analytics}</section>   {/* 两块独立渲染 */}
      <section>{team}</section>         {/* 各有自己的 loading/error */}
    </div>
  )
}