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`

单参数示例[编辑 | 编辑源代码]

// 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>;
}

当访问`/posts/42`时，页面输出：

Post ID: 42

多参数示例[编辑 | 编辑源代码]

// pages/categories/[category]/[item].js
export default function Item() {
  const { category, item } = useRouter().query;
  return <div>{category} → {item}</div>;
}

访问`/categories/electronics/headphones`输出：

electronics → headphones

高级特性[编辑 | 编辑源代码]

可选捕获[编辑 | 编辑源代码]

通过双括号`...param`定义可选参数：

// pages/docs/[[...slug]].js
// 匹配 /docs, /docs/a, /docs/a/b 等

正则表达式约束[编辑 | 编辑源代码]

在文件名中使用`[param](regex)`语法限制参数格式：

// pages/users/[id](\\d+).js
// 仅匹配数字ID（如/users/123）

实际应用案例[编辑 | 编辑源代码]

电商产品页[编辑 | 编辑源代码]

实现代码：

// 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>
  );
}

分页查询[编辑 | 编辑源代码]

通过路由参数实现分页：

// pages/blog/[page].js
export default function BlogPage() {
  const { page } = useRouter().query;
  const posts = getPaginatedPosts(page); // 伪代码
  return <PostList posts={posts} />;
}

数学公式支持[编辑 | 编辑源代码]

当需要计算分页总数时： 解析失败 (语法错误): {\displaystyle 总页数 = \lceil \frac{总记录数}{每页数量} \rceil }

注意事项[编辑 | 编辑源代码]

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

总结[编辑 | 编辑源代码]

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