灵犀科技 高端网站建设背景图长沙seo霜天
更多有关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博客