Next.js 动态路由

Next.js 是一个强大的 React 框架，提供了许多开箱即用的功能，其中之一就是动态路由。动态路由允许你根据 URL 中的参数动态生成页面，从而创建灵活的页面结构。本文将详细介绍 Next.js 动态路由的概念、使用方法以及实际应用场景。

什么是动态路由？

在传统的静态路由中，每个页面的路径是固定的。例如，/about 对应一个关于页面，/contact 对应一个联系页面。然而，在某些情况下，你可能需要根据 URL 中的参数动态生成页面内容。例如，一个博客网站可能需要根据文章 ID 动态生成文章页面。

Next.js 的动态路由功能允许你通过在文件名中使用方括号 [] 来定义动态路由。这样，你可以根据 URL 中的参数动态生成页面。

创建动态路由

基本语法

在 Next.js 中，你可以通过在 pages 目录下创建带有方括号的文件名来定义动态路由。例如，创建一个名为 [id].js 的文件，表示这个页面将根据 id 参数动态生成。

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

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

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

export default Post;

在这个例子中，id 是从 URL 中提取的动态参数。例如，访问 /posts/123 时，id 的值将是 123，页面将显示 "Post: 123"。

多段动态路由

你还可以创建多段动态路由。例如，创建一个名为 [category]/[id].js 的文件，表示这个页面将根据 category 和 id 参数动态生成。

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

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

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

export default Post;

在这个例子中，访问 /posts/react/123 时，category 的值将是 react，id 的值将是 123，页面将显示 "Category: react, Post: 123"。

实际应用场景

博客网站

假设你正在构建一个博客网站，每篇文章都有一个唯一的 ID。你可以使用动态路由来根据文章 ID 动态生成文章页面。

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

在这个例子中，fetchPostById 是一个假设的函数，用于根据 id 获取文章内容。访问 /posts/123 时，页面将显示 ID 为 123 的文章内容。

电商网站

在电商网站中，你可能需要根据产品 ID 动态生成产品详情页面。

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

在这个例子中，fetchProductById 是一个假设的函数，用于根据 id 获取产品详情。访问 /products/456 时，页面将显示 ID 为 456 的产品详情。

总结

Next.js 的动态路由功能为开发者提供了极大的灵活性，允许你根据 URL 中的参数动态生成页面。通过使用方括号 [] 定义动态路由，你可以轻松创建适用于博客、电商等场景的动态页面。

附加资源

练习

创建一个动态路由页面 pages/users/[username].js，根据用户名显示用户信息。
尝试创建一个多段动态路由页面 pages/categories/[category]/[subcategory].js，根据类别和子类别显示相关内容。

通过实践这些练习，你将更好地掌握 Next.js 动态路由的使用方法。

什么是动态路由？​

创建动态路由​

基本语法​

多段动态路由​

实际应用场景​

博客网站​

电商网站​

总结​

附加资源​

练习​