Next.js 独立开发教程（六）：页面导航与路由

本文链接：https://blog.csdn.net/liuweni/article/details/143921602

前言

在 Web 应用开发中，页面导航是用户体验的核心之一。Next.js 提供了强大的内置路由系统和导航功能，使开发者能够轻松创建流畅的页面跳转体验。本文将通过深入解析 Next.js 的导航机制，并结合实践，帮助您掌握如何在仪表盘项目中高效实现页面间的导航。

`1. Next.js 路由简介`

Next.js 的路由系统基于文件结构，具备以下特点：

自动生成路*：`pages` 文件夹中的每个文件都映射为一个 URL 路径。
嵌套路由支持：通过嵌套文件夹创建多级路由。
动态路由：支持带参数的动态 URL。

示例：

pages/index.js 对应 `/`
pages/dashboard.js 对应 `/dashboard`
pages/dashboard/[id].js 对应 `/dashboard/:id`

以下章节将围绕这些功能展开，结合实际案例实现页面导航。

2. 使用 `Link` 组件实现导航

`2.1 基本用法`

Next.js 提供了内置的 `Link` 组件，用于在页面之间跳转。以下是一个简单的导航示例：

// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>首页</h1>
      <Link href="/dashboard">前往仪表盘</Link>
    </div>
  );
}

访问首页 `/`，点击“前往仪表盘”链接即可跳转到 `/dashboard` 页面。

`2.2 使用动态路由进行导航`

动态路由允许页面接收参数。例如，为每个用户生成一个详情页，可以这样实现：

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

export default function UserDetail() {
  const router = useRouter();
  const { id } = router.query; // 获取动态路由参数

  return (
    <div>
      <h1>用户详情页</h1>
      <p>当前用户 ID：{id}</p>
    </div>
  );
}

在仪表盘页面中添加用户导航链接：

// pages/dashboard.js
import Link from 'next/link';

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
];

export default function Dashboard() {
  return (
    <div>
      <h1>仪表盘</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <Link href={`/dashboard/${user.id}&