手帐 Blog

主题

05 · App Router 路由心智：layout / page / loading / error ​

目标：用文件系统配好多级路由与共享 layout，理解嵌套与导航，不再靠「Vue Router 配置表」硬套。
官方主文：Routing Fundamentals · Pages and Layouts · Linking and Navigating

1. 核心心智：文件夹 = 路由段 ​

text
app/
  layout.tsx          → 所有页面共享根壳
  page.tsx            → /
  notes/
    layout.tsx        → /notes 段共享壳（可选）
    page.tsx          → /notes
    [id]/
      page.tsx        → /notes/:id
  about/
    page.tsx          → /about
约定文件作用
page.tsx该段可访问的 UI（没有 page 则不可当路由落地）
layout.tsx包裹同段及子段；切换子页时 layout 可保持不卸载
loading.tsx该段加载时的即时 loading UI（Suspense 边界）
error.tsx该段错误 UI（必须 Client Component）
not-found.tsx404 UI

对照 Vue Router：routes 表 → 目录树；router-view 嵌套 → layout 嵌套 children（由框架拼）。

2. 手敲：笔记区路由骨架 ​

在 02 项目中创建：

app/notes/layout.tsx

tsx
import Link from 'next/link'

export default function NotesLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <section style={{ padding: 24 }}>
      <header style={{ display: 'flex', gap: 16, marginBottom: 16 }}>
        <strong>Notes</strong>
        <Link href="/notes">列表</Link>
        <Link href="/">回首页</Link>
      </header>
      {children}
    </section>
  )
}

app/notes/page.tsx

tsx
import Link from 'next/link'

const DEMO = [
  { id: '1', title: '第一篇' },
  { id: '2', title: '第二篇' },
]

export default function NotesPage() {
  return (
    <main>
      <h1>笔记列表</h1>
      <ul>
        {DEMO.map((n) => (
          <li key={n.id}>
            <Link href={`/notes/${n.id}`}>{n.title}</Link>
          </li>
        ))}
      </ul>
    </main>
  )
}

app/notes/[id]/page.tsx

tsx
type Props = { params: Promise<{ id: string }> }

export default async function NoteDetailPage({ params }: Props) {
  const { id } = await params
  return (
    <main>
      <h1>笔记详情</h1>
      <p>id: {id}</p>
    </main>
  )
}

params 在较新 Next 版本为 Promise，需 await（以你安装的 nextjs.org 当前文档为准；若类型是同步对象，按官方该版写法即可）。

app/notes/loading.tsx

tsx
export default function Loading() {
  return <p>加载笔记中…</p>
}

app/notes/error.tsx

tsx
'use client'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <div>
      <p>出错了：{error.message}</p>
      <button type="button" onClick={reset}>
        重试
      </button>
    </div>
  )
}

访问 /notes、/notes/1，确认 layout 里的导航在子页间保留。

3. 导航：用 Link，少硬跳 ​

tsx
import Link from 'next/link'
import { useRouter } from 'next/navigation' // 仅 Client Component
场景做法
声明式跳转<Link href="...">
事件后跳转Client 里 router.push
外链普通 <a>

官方：Linking and Navigating。

4. 常见坑（AI 也常踩） ​

坑纠正
建了文件夹却忘记 page.tsx404 / 空白
在 Server Component 里用 useRouter加 'use client' 或改用 Link
用 next/router（Pages）App Router 用 next/navigation
把所有东西塞进根 layout按段拆 notes/layout.tsx

5. 必做验收 ​

  • [ ] /notes、/notes/[id] 可访问
  • [ ] notes/layout 导航在详情页仍在
  • [ ] 有 loading.tsx / error.tsx（可先简单）
  • [ ] 列表用 Link，不用 window.location
  • [ ] 能画出自己项目的 app/ 树与对应 URL

6. AI 提示词约束（本篇） ​

text
技术约束：Next.js App Router（不要 pages/）。
根据我的需求生成文件夹与约定文件列表，
每个文件注明官方文档章节名；不要安装第三方路由库。

7. 下一步 ​

→ 06 · Server Components vs Client Components

官方入口 ​