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`

示例：基本路由

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

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

// pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}

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

嵌套路由

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

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

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

动态路由

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

示例：基本动态路由

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

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

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

多段动态路由

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

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

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

路由导航

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

使用 `Link` 组件

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

import Link from 'next/link';

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

使用 `useRouter` Hook

`useRouter` 允许以编程方式导航。

import { useRouter } from 'next/router';

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

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

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

实际应用场景

以下是一个博客系统的路由设计示例：

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

对应的文件结构：

• `pages/index.js`（首页）
• `pages/blog/index.js`（博客列表）
• `pages/blog/[slug].js`（博客详情）
• `pages/about.js`（关于页面）

总结

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

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