第 2 章：页面与路由系统

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

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

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

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

目录结构：

bash 复制代码

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

示例：pages/about.js

jsx 复制代码

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

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

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

2.2 动态路由 `[id].js`

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

目录结构：

bash 复制代码

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

访问路径示例：

/blog/hello-world
/blog/123

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

jsx 复制代码

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 路由 能捕捉多个段路径，常用于构建类似文档、分类等不定深度的路由。

目录结构：

bash 复制代码

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

匹配示例：

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

示例代码：

jsx 复制代码

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 支持目录嵌套，自动生成嵌套路由：

目录结构：

bash 复制代码

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

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

jsx 复制代码

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()`

jsx 复制代码

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，可通过：

js 复制代码

const { id } = useRouter().query;

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

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

可以通过：

js 复制代码

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

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

使用 getServerSideProps 时也可以获取：

js 复制代码

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`

第 2 章：页面与路由系统