跳到主要内容

Next.js 路由基础

Next.js 是一个基于 React 的框架，提供了强大的路由功能，使得开发者可以轻松地创建和管理页面路由。Next.js 的路由系统是基于文件系统的，这意味着你只需在 pages 目录下创建文件，Next.js 就会自动为你生成相应的路由。

介绍​

在 Next.js 中，路由是通过文件系统来定义的。每个在 pages 目录下的文件都会自动成为一个路由。例如，pages/index.js 对应的是根路由 /，而 pages/about.js 则对应 /about 路由。

Next.js 还支持动态路由，允许你根据 URL 中的参数动态生成页面。这使得你可以创建更加灵活和动态的应用程序。

基本路由​

创建静态路由​

在 Next.js 中，创建静态路由非常简单。你只需在 pages 目录下创建一个文件，Next.js 就会自动为你生成相应的路由。

例如，创建一个 about.js 文件：

jsx
// pages/about.js
export default function About() {
  return <div>About Page</div>;
}

当你访问 /about 时，Next.js 会自动渲染这个页面。

嵌套路由​

Next.js 还支持嵌套路由。你可以在 pages 目录下创建子目录来组织你的路由。

例如，创建一个 pages/blog/index.js 文件：

jsx
// pages/blog/index.js
export default function Blog() {
  return <div>Blog Page</div>;
}

当你访问 /blog 时，Next.js 会自动渲染这个页面。

动态路由​

创建动态路由​

Next.js 支持动态路由，允许你根据 URL 中的参数动态生成页面。动态路由的文件名需要用方括号 [] 包裹。

例如，创建一个 pages/blog/[slug].js 文件：

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

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return <div>Blog Post: {slug}</div>;
}

当你访问 /blog/my-first-post 时，Next.js 会自动渲染这个页面，并将 my-first-post 作为 slug 参数传递给组件。

多个动态参数​

你还可以在动态路由中使用多个参数。例如，创建一个 pages/blog/[year]/[month]/[slug].js 文件：

jsx
// pages/blog/[year]/[month]/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { year, month, slug } = router.query;

  return (
    <div>
      Blog Post: {year}/{month}/{slug}
    </div>
  );
}

当你访问 /blog/2023/10/my-first-post 时，Next.js 会自动渲染这个页面，并将 2023、10 和 my-first-post 作为参数传递给组件。

实际案例​

博客系统​

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

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

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  // 根据 slug 获取博客内容
  const post = getPostBySlug(slug);

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

在这个例子中，getPostBySlug 是一个假设的函数，用于根据 slug 获取博客内容。通过这种方式，你可以轻松地为每篇博客文章生成唯一的页面。

总结​

Next.js 的路由系统非常强大且易于使用。通过文件系统定义路由，你可以轻松地创建静态和动态路由。动态路由允许你根据 URL 中的参数动态生成页面，使得你的应用程序更加灵活和动态。

附加资源​

练习​

  1. 创建一个 pages/contact.js 文件，并实现一个简单的联系页面。
  2. 创建一个动态路由 pages/users/[id].js，并根据 id 显示用户信息。
  3. 尝试创建一个嵌套路由 pages/products/[category]/[id].js，并根据 category 和 id 显示产品信息。

通过完成这些练习，你将更好地理解 Next.js 的路由机制，并能够在实际项目中应用这些知识。