编辑“︁Next.js路由基础”︁

= Next.js路由基础 =

== 介绍 ==
Next.js 是一个基于 React 的框架，提供了强大的路由系统，允许开发者轻松构建单页应用（SPA）或多页应用（MPA）。Next.js 的路由系统基于文件系统，这意味着页面的路由由项目的文件结构决定，无需额外配置。这一特性使得路由管理变得直观且高效，特别适合初学者和需要快速开发的团队。

Next.js 的路由分为两种主要类型：
* '''文件系统路由'''：基于 `pages` 目录的自动路由映射。
* '''动态路由'''：支持参数化路径，适用于动态内容加载。

本文将详细介绍这两种路由方式，并提供代码示例和实际应用场景。

== 文件系统路由 ==
Next.js 的路由系统基于 `pages` 目录的结构。每个文件或文件夹的名称直接映射到 URL 路径。例如：
* `pages/index.js` → `/`
* `pages/about.js` → `/about`
* `pages/blog/first-post.js` → `/blog/first-post`

=== 示例：基本路由 ===
以下是一个简单的文件系统路由示例：

<syntaxhighlight lang="javascript">
// pages/index.js
export default function Home() {
  return <h1>Welcome to the Home Page!</h1>;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}
</syntaxhighlight>

当用户访问 `/` 时，会显示 `Home` 组件的内容；访问 `/about` 时，会显示 `About` 组件的内容。

=== 嵌套路由 ===
Next.js 支持嵌套路由，通过文件夹结构实现。例如，`pages/blog/index.js` 会映射到 `/blog`，而 `pages/blog/first-post.js` 会映射到 `/blog/first-post`。

<syntaxhighlight lang="javascript">
// pages/blog/index.js
export default function Blog() {
  return <h1>Blog Home Page</h1>;
}
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// pages/blog/first-post.js
export default function FirstPost() {
  return <h1>First Blog Post</h1>;
}
</syntaxhighlight>

== 动态路由 ==
动态路由允许 URL 中包含参数，适用于需要根据输入动态加载内容的场景。Next.js 使用方括号 `[]` 表示动态路由参数。

=== 示例：基本动态路由 ===
以下是一个动态路由的示例，展示如何根据 URL 参数加载不同的内容：

<syntaxhighlight lang="javascript">
// pages/blog/[slug].js
import { useRouter } from 'next/router';

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

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

当用户访问 `/blog/hello-world` 时，页面会显示 "Blog Post: hello-world"。

=== 多段动态路由 ===
Next.js 还支持多段动态路由，例如 `pages/post/[...slug].js` 可以匹配 `/post/a`、`/post/a/b` 等路径。

<syntaxhighlight lang="javascript">
// pages/post/[...slug].js
import { useRouter } from 'next/router';

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

  return <h1>Post: {slug.join('/')}</h1>;
}
</syntaxhighlight>

访问 `/post/a/b/c` 会显示 "Post: a/b/c"。

== 路由导航 ==
Next.js 提供了 `Link` 组件和 `useRouter` Hook 来实现客户端导航，避免页面刷新。

=== 使用 `Link` 组件 ===
`Link` 是 Next.js 提供的组件，用于在页面之间导航。

<syntaxhighlight lang="javascript">
import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </nav>
  );
}
</syntaxhighlight>

=== 使用 `useRouter` Hook ===
`useRouter` 允许以编程方式导航。

<syntaxhighlight lang="javascript">
import { useRouter } from 'next/router';

export default function LoginButton() {
  const router = useRouter();

  const handleLogin = () => {
    router.push('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
}
</syntaxhighlight>

== 实际应用场景 ==
以下是一个博客系统的路由设计示例：

<mermaid>
graph TD
    A[Home] --> B[Blog]
    B --> C[Blog Post 1]
    B --> D[Blog Post 2]
    A --> E[About]
</mermaid>

对应的文件结构：
* `pages/index.js`（首页）
* `pages/blog/index.js`（博客列表）
* `pages/blog/[slug].js`（博客详情）
* `pages/about.js`（关于页面）

== 总结 ==
Next.js 的路由系统基于文件结构，提供了简单而强大的方式来管理页面导航。通过文件系统路由和动态路由，开发者可以轻松构建复杂的应用。`Link` 组件和 `useRouter` Hook 进一步简化了客户端导航的实现。

掌握 Next.js 路由是构建现代 Web 应用的关键一步，希望本文能帮助你快速上手！

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js基础]]