第 2 章：页面与路由系统

⚙️ 第 2 章：页面与路由系统

Next.js 的路由系统是基于文件系统自动生成的，不需要引入第三方路由库（比如 react-router），大大简化了页面组织与跳转逻辑。

---

2.1 基于文件的路由机制（pages 目录）

Next.js 会将 pages 目录下的每个 .js/.ts/.jsx/.tsx 文件自动映射为一个路由：

目录结构：

pages/
├── index.js          // 首页，路径为 "/"
├── about.js          // 路径为 "/about"
├── contact.js        // 路径为 "/contact"

示例：pages/about.js

export default function About() {
  return <h1>关于我们</h1>;
}

访问 http://localhost:3000/about 即可看到页面内容。

✅ 页面组件必须是默认导出（export default），否则无法被识别为路由页面。

---

2.2 动态路由 [id].js

动态路由用于匹配路径参数，比如博客文章、产品详情页等。

目录结构：

pages/
└── blog/
    └── [id].js     // 匹配任意 blog/:id

访问路径示例：

• /blog/hello-world
• /blog/123

示例代码：pages/blog/[id].js

import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>当前文章 ID：{id}</h1>;
}

📝 参数 id 来自路由路径，会通过 router.query.id 访问到。

---

2.3 Catch-all 路由 [...slug].js

Catch-all 路由 能捕捉多个段路径，常用于构建类似文档、分类等不定深度的路由。

目录结构：

pages/
└── docs/
    └── [...slug].js   // 匹配 docs/* 多级路径

匹配示例：

• /docs/guide
• /docs/api/v1/get-user
• /docs/a/b/c

示例代码：

import { useRouter } from 'next/router';

export default function DocsPage() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <>
      <h1>文档路径：</h1>
      <pre>{JSON.stringify(slug, null, 2)}</pre>
    </>
  );
}

✅ slug 是数组类型，比如访问 /docs/a/b，值为 ['a', 'b']

---

2.4 嵌套路由与页面导航 <Link> 与 useRouter()

Next.js 支持目录嵌套，自动生成嵌套路由：

目录结构：

pages/
└── user/
    ├── index.js      // /user
    └── profile.js    // /user/profile

页面跳转方式 1：<Link>（推荐）

import Link from 'next/link';

export default function Home() {
  return (
    <nav>
      <Link href="/about">关于我们</Link>
      <Link href="/user/profile">用户中心</Link>
    </nav>
  );
}

✅ Link 组件内部可以是任意元素，不局限于 <a> 标签。

页面跳转方式 2：useRouter().push()

import { useRouter } from 'next/router';

export default function RedirectButton() {
  const router = useRouter();

  const goToProfile = () => {
    router.push('/user/profile');
  };

  return <button onClick={goToProfile}>跳转到用户中心</button>;
}

---

2.5 页面传参方式（query、params）

✅ 场景一：路径参数（动态路由）

路径如 /post/123，文件为 [id].js，可通过：

const { id } = useRouter().query;

✅ 场景二：查询参数（search string）

路径如 /search?keyword=nextjs&page=2

可以通过：

const router = useRouter();
console.log(router.query); // { keyword: 'nextjs', page: '2' }

✅ 场景三：服务端获取参数

使用 getServerSideProps 时也可以获取：

export async function getServerSideProps(context) {
  const { id } = context.params;      // 动态路径参数
  const { keyword } = context.query;  // 查询字符串

  return { props: { id, keyword } };
}

---

✅ 小结

功能	方法/技巧
静态页面路由	pages/*.js 自动生成
动态路径参数	[id].js, useRouter().query.id
多层路径参数	[...slug].js, 捕获路径数组
页面跳转	<Link href=""> / router.push()
获取参数	router.query / getServerSideProps