跳到主要内容

Next.js 路由参数

在 Next.js 中，路由参数（Route Parameters）是一种强大的功能，允许你根据动态值生成页面。通过路由参数，你可以创建动态路由，从而根据 URL 中的变量值渲染不同的内容。这对于构建博客、产品详情页或用户个人资料页等场景非常有用。

什么是路由参数？​

路由参数是 URL 中的动态部分，用于捕获特定的值。例如，在 URL /posts/123 中，123 是一个路由参数，表示文章的 ID。Next.js 允许你通过文件名和文件夹结构来定义这些动态路由。

基本用法​

创建动态路由​

在 Next.js 中，你可以通过在文件名或文件夹名中使用方括号 [] 来定义动态路由。例如，创建一个文件 pages/posts/[id].js，表示 /posts/123 这样的 URL 会被映射到这个页面。

jsx
// pages/posts/[id].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  return <p>Post ID: {id}</p>;
};

export default Post;

在这个例子中，id 是一个路由参数，它会被 Next.js 自动解析并传递给页面组件。你可以通过 useRouter 钩子访问这个参数。

访问路由参数​

在上面的代码中，router.query 包含了所有的路由参数。你可以通过解构赋值来获取特定的参数值。例如，const { id } = router.query; 会提取出 id 参数。

示例输出​

假设你访问 /posts/123，页面将显示：

Post ID: 123

多段路由参数​

Next.js 还支持多段路由参数。例如，你可以创建一个文件 pages/categories/[category]/[id].js，表示 /categories/tech/123 这样的 URL。

jsx
// pages/categories/[category]/[id].js
import { useRouter } from 'next/router';

const CategoryPost = () => {
  const router = useRouter();
  const { category, id } = router.query;

  return (
    <p>
      Category: {category}, Post ID: {id}
    </p>
  );
};

export default CategoryPost;

示例输出​

访问 /categories/tech/123，页面将显示：

Category: tech, Post ID: 123

实际应用场景​

博客系统​

假设你正在构建一个博客系统，每篇文章都有一个唯一的 ID。你可以使用动态路由来为每篇文章生成一个独立的页面。

jsx
// pages/posts/[id].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  // 假设你有一个函数 fetchPostById 来获取文章内容
  const post = fetchPostById(id);

  if (!post) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
};

export default Post;

产品详情页​

在电商网站中，每个产品都有一个唯一的 ID。你可以使用动态路由来为每个产品生成一个详情页。

jsx
// pages/products/[id].js
import { useRouter } from 'next/router';

const Product = () => {
  const router = useRouter();
  const { id } = router.query;

  // 假设你有一个函数 fetchProductById 来获取产品信息
  const product = fetchProductById(id);

  if (!product) {
    return <p>Loading...</p>;
  }

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

export default Product;

总结​

Next.js 的路由参数功能使得动态路由的实现变得非常简单。通过使用方括号 [] 定义动态路由，你可以轻松地根据 URL 中的变量值生成页面。无论是构建博客、产品详情页还是用户个人资料页，路由参数都能帮助你实现灵活的路由系统。

附加资源​

练习​

  1. 创建一个动态路由页面 pages/users/[username].js，显示用户的用户名。
  2. 尝试创建一个多段路由页面 pages/shop/[category]/[product].js，显示产品的类别和名称。
  3. 使用 getStaticPaths 和 getStaticProps 预生成动态路由页面。
提示

在开发过程中，你可以使用 console.log(router.query) 来调试路由参数，确保你正确地获取了 URL 中的变量值。