编辑“︁Next.js路由参数”︁（章节）

= Next.js路由参数 =

== 介绍 ==
Next.js的路由参数（Route Parameters）是动态路由的核心功能，允许开发者通过URL传递变量值到页面组件。这种机制使得创建动态页面（如博客文章、用户资料等）无需手动配置每个可能的路由。

在传统的静态路由中，每个页面需要一个独立文件（如`about.js`对应`/about`）。而动态路由通过方括号语法（`[param]`）定义，例如`pages/posts/[id].js`可以匹配`/posts/1`、`/posts/abc`等路径。

== 基础语法 ==
Next.js支持两种动态路由参数：
* '''单参数'''：`pages/posts/[id].js`
* '''多参数'''：`pages/categories/[category]/[item].js`

=== 单参数示例 ===
<syntaxhighlight lang="javascript">
// pages/posts/[id].js
import { useRouter } from 'next/router';

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

  return <div>Post ID: {id}</div>;
}
</syntaxhighlight>

当访问`/posts/42`时，页面输出：
<pre>Post ID: 42</pre>

=== 多参数示例 ===
<syntaxhighlight lang="javascript">
// pages/categories/[category]/[item].js
export default function Item() {
  const { category, item } = useRouter().query;
  return <div>{category} → {item}</div>;
}
</syntaxhighlight>

访问`/categories/electronics/headphones`输出：
<pre>electronics → headphones</pre>

== 高级特性 ==
=== 可选捕获 ===
通过双括号`[[...param]]`定义可选参数：
<syntaxhighlight lang="javascript">
// pages/docs/[[...slug]].js
// 匹配 /docs, /docs/a, /docs/a/b 等
</syntaxhighlight>

=== 正则表达式约束 ===
在文件名中使用`[param](regex)`语法限制参数格式：
<syntaxhighlight lang="javascript">
// pages/users/[id](\\d+).js
// 仅匹配数字ID（如/users/123）
</syntaxhighlight>

== 实际应用案例 ==
=== 电商产品页 ===
<mermaid>
graph LR
  A[首页] --> B[产品列表]
  B --> C[产品详情页]
  C -->|动态参数| D(/products/123)
</mermaid>

实现代码：
<syntaxhighlight lang="javascript">
// pages/products/[pid].js
export default function Product() {
  const { pid } = useRouter().query;
  const product = getProductById(pid); // 伪代码：根据ID获取数据

  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
    </div>
  );
}
</syntaxhighlight>

=== 分页查询 ===
通过路由参数实现分页：
<syntaxhighlight lang="javascript">
// pages/blog/[page].js
export default function BlogPage() {
  const { page } = useRouter().query;
  const posts = getPaginatedPosts(page); // 伪代码
  return <PostList posts={posts} />;
}
</syntaxhighlight>

== 数学公式支持 ==
当需要计算分页总数时：
<math>
总页数 = \lceil \frac{总记录数}{每页数量} \rceil
</math>

== 注意事项 ==
* 参数值始终是字符串类型，需要时需手动转换
* 预渲染时需通过`getStaticPaths`指定可能的参数值
* 客户端导航时参数通过`next/link`自动传递

== 总结 ==
Next.js路由参数系统提供了强大的URL模式匹配能力，结合服务端渲染特性，能够高效构建动态内容网站。通过本文的示例和解释，开发者可以快速掌握从基础到高级的路由参数应用技巧。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js路由系统]]