Next.js系统性教学：动态路由与并行路由

 更多有关Next.js教程，请查阅：

【目录】Next.js 独立开发系列教程-CSDN博客

---

目录

1. 动态路由 (Dynamic Routes)

1.1 动态路由的基础

1.2 获取动态参数

1.3 动态嵌套路由

1.4 捕获所有动态路由

2. 并行路由 (Parallel Routes)

2.1 并行路由的基础概念

2.2 定义并行路由

2.3 并行路由内容

2.4 并行路由的使用场景

3. 动态路由与并行路由的结合

4. 总结

 独立开发系列文章目录

Next.js系统性学习系列文章目录

---

Next.js 是一个强大、灵活的框架，其路由功能为构建现代化 Web 应用提供了丰富的支持。本文将深入探讨 动态路由 和 并行路由 的实现和使用场景，帮助开发者掌握这些高级路由技巧。

---

1. 动态路由 (Dynamic Routes)

动态路由允许开发者基于变量（如用户 ID、文章标题等）生成动态页面，极大增强了应用的灵活性。

1.1 动态路由的基础

在 app 目录中，动态路由通过方括号 [ ] 声明，例如 [id]。每个动态路由文件都会映射到一个路径参数。

目录结构：

app/
├── blog/
│   ├── [id]/
│   │   ├── page.js

上述结构会生成路径 /blog/:id，其中 :id 是动态变量。

示例代码：app/blog/[id]/page.js

export default function BlogPost({ params }) {const { id } = params;return (<main><h1>文章 ID: {id}</h1><p>这是文章 {id} 的内容。</p></main>);
}

• params 对象包含路径中的动态变量。
• 访问 /blog/123 时，页面会渲染文章 ID 为 123 的内容。

---

1.2 获取动态参数

在页面中可以通过 params 获取动态路径的参数。假设路径为 /blog/[id]：

export default function BlogPost({ params }) {return <h1>文章 ID: {params.id}</h1>;
}

动态参数可以用来获取数据，或根据路径呈现不同内容。

---

1.3 动态嵌套路由

动态路由可以嵌套使用，适合组织多层级数据。

目录结构：

app/
├── users/
│   ├── [userId]/
│   │   ├── settings/
│   │   │   ├── page.js

此结构支持路径 /users/:userId/settings，例如 /users/42/settings。

示例代码：app/users/[userId]/settings/page.js

export default function UserSettings({ params }) {return <h1>用户 {params.userId} 的设置</h1>;
}

这种方式简化了复杂路由结构的管理。

---

1.4 捕获所有动态路由

Next.js 提供 [...param] 捕获所有动态路由，适合用来处理未知路径。

目录结构：

app/
├── catch-all/
│   ├── [...slug]/
│   │   ├── page.js

路径 /catch-all/first/second 会映射到 [...slug]/page.js，slug 会包含 ['first', 'second']。

示例代码：app/catch-all/[...slug]/page.js

export default function CatchAll({ params }) {return <h1>路径参数: {params.slug.join("/")}</h1>;
}

---

2. 并行路由 (Parallel Routes)

并行路由是一种强大的工具，允许开发者在页面中呈现多个同时加载的路由内容。这非常适合在同一页面中呈现不同来源或区域的内容。

2.1 并行路由的基础概念

在并行路由中，路由以命名插槽的形式呈现。插槽允许不同路由内容以并行方式加载到同一布局中。

目录结构：

app/
├── dashboard/
│   ├── layout.js
│   ├── @analytics/
│   │   ├── page.js
│   ├── @settings/
│   │   ├── page.js

• @analytics 和 @settings 是并行路由的命名插槽。
• 插槽内容会渲染到 layout.js 中定义的位置。

---

2.2 定义并行路由

通过在 layout.js 中指定插槽位置，开发者可以灵活控制并行路由的显示。

示例代码：app/dashboard/layout.js

export default function DashboardLayout({ analytics, settings }) {return (<main><section>{analytics}</section><section>{settings}</section></main>);
}

• analytics 和 settings 对应各自的并行路由内容。
• 页面会并行加载 @analytics/page.js 和 @settings/page.js。

---

2.3 并行路由内容

每个插槽可以独立渲染自己的内容，同时继承上层布局。

示例代码：app/dashboard/@analytics/page.js

export default function Analytics() {return <h1>分析面板</h1>;
}

示例代码：app/dashboard/@settings/page.js

export default function Settings() {return <h1>设置面板</h1>;
}

最终页面会同时呈现两部分内容。

---

2.4 并行路由的使用场景

• 仪表盘设计：在一个页面中展示不同的统计数据、图表或用户设置。
• 内容展示：同时加载文章正文与评论区域。
• 后台管理：让多个管理模块并行加载，提升操作效率。

---

3. 动态路由与并行路由的结合

动态路由和并行路由可以结合使用，构建灵活的多层级应用。

目录结构：

app/
├── dashboard/
│   ├── [userId]/
│   │   ├── layout.js
│   │   ├── @analytics/
│   │   │   ├── page.js
│   │   ├── @settings/
│   │   │   ├── page.js

此结构支持路径 /dashboard/:userId，其中包含并行的 @analytics 和 @settings 插槽。

示例代码：app/dashboard/[userId]/layout.js

export default function UserDashboardLayout({ children, analytics, settings }) {return (<main><header>用户 {children} 的仪表盘</header><section>{analytics}</section><section>{settings}</section></main>);
}

---

4. 总结

• 动态路由 提供灵活的路径处理能力，适合用来构建基于变量的页面内容。
• 并行路由 则更适合复杂页面，支持同时加载多个内容区域，提升性能与用户体验。
• 结合使用动态路由与并行路由，可以设计出功能强大、体验流畅的现代 Web 应用。

通过熟练掌握这些特性，您将能最大化地发挥 Next.js 路由系统的威力，为用户提供更加高效和出色的应用体验。

 更多有关Next.js教程，请查阅：

【目录】Next.js 独立开发系列教程-CSDN博客