跳到主要内容

Next.js 路由系统

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

介绍​

在传统的 React 应用中，路由通常是通过 react-router-dom 这样的库来管理的。然而，Next.js 提供了更简单、更直观的方式来处理路由。Next.js 的路由系统基于文件系统，这意味着你只需在 pages 目录下创建文件，Next.js 就会自动为你生成相应的路由。

文件系统路由​

Next.js 的路由系统是基于文件系统的。每个在 pages 目录下的文件都会自动成为一个路由。例如：

  • pages/index.js 对应 / 路由。
  • pages/about.js 对应 /about 路由。
  • pages/blog/index.js 对应 /blog 路由。

动态路由​

Next.js 还支持动态路由。你可以通过在文件名中使用方括号 [] 来创建动态路由。例如：

  • pages/blog/[slug].js 对应 /blog/:slug 路由，其中 :slug 是一个动态参数。

基本路由示例​

让我们从一个简单的例子开始。假设我们有一个 pages 目录，结构如下：

pages/
├── index.js
├── about.js
└── blog/
    ├── index.js
    └── [slug].js

静态路由​

pages/index.js 文件的内容如下：

jsx
export default function Home() {
  return <h1>Welcome to the Home Page!</h1>;
}

当你访问 / 时，Next.js 会自动渲染这个组件。

pages/about.js 文件的内容如下：

jsx
export default function About() {
  return <h1>About Us</h1>;
}

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

动态路由​

pages/blog/[slug].js 文件的内容如下：

jsx
import { useRouter } from 'next/router';

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

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

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

嵌套路由​

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

pages/
├── index.js
├── about.js
└── blog/
    ├── index.js
    ├── [slug].js
    └── category/
        ├── index.js
        └── [category].js

pages/blog/category/[category].js 文件的内容如下：

jsx
import { useRouter } from 'next/router';

export default function BlogCategory() {
  const router = useRouter();
  const { category } = router.query;

  return <h1>Blog Category: {category}</h1>;
}

当你访问 /blog/category/react 时，Next.js 会自动渲染这个组件，并将 react 作为 category 参数传递给组件。

实际应用场景​

假设你正在构建一个博客网站，你需要展示不同的博客文章和分类。使用 Next.js 的路由系统，你可以轻松地实现这一点。

博客文章页面​

你可以使用动态路由来创建博客文章页面。例如：

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

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

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
      <p>This is the content of the blog post.</p>
    </div>
  );
}

博客分类页面​

你可以使用嵌套路由来创建博客分类页面。例如：

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

export default function BlogCategory() {
  const router = useRouter();
  const { category } = router.query;

  return (
    <div>
      <h1>Blog Category: {category}</h1>
      <p>Here are all the posts in this category.</p>
    </div>
  );
}

总结​

Next.js 的路由系统基于文件系统，使得创建静态和动态路由变得非常简单。通过使用文件系统路由，你可以轻松地组织和管理你的应用路由。动态路由和嵌套路由使得处理复杂的路由结构变得更加容易。

提示

在实际项目中，合理组织你的 pages 目录结构非常重要。良好的目录结构可以帮助你更好地管理路由，并提高代码的可维护性。

附加资源​

练习​

  1. 创建一个新的 Next.js 项目，并在 pages 目录下创建以下路由：

    • / 路由，显示欢迎信息。
    • /about 路由，显示关于页面。
    • /blog 路由，显示博客列表。
    • /blog/[slug] 路由，显示单个博客文章。
    • /blog/category/[category] 路由，显示某个分类下的博客文章。

  2. 尝试在动态路由中使用多个参数，例如 /blog/[year]/[month]/[slug]，并在页面中显示这些参数。

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