文章目录什么是平行路由核心概念速览快速上手构建仪表盘布局项目结构1. 定义插槽布局2. 创建各个插槽内容高级特性深度探索1. 条件渲染基于用户角色的动态布局2. 结合拦截路由实现模态框3. 错误边界和加载状态解决常见问题1. 硬导航后的默认内容2. 路由冲突避免在现代 Web 应用开发中我们经常需要构建复杂的界面布局比如仪表盘、社交平台或管理后台。传统的路由方式往往无法满足这种动态、多部分同时更新的需求。这就是 Next.js 平行路由大显身手的地方。什么是平行路由平行路由Parallel Routes是 Next.js 的一个高级特性它允许你在同一个布局中同时渲染多个页面每个页面都可以独立管理和更新。核心概念速览概念说明示例插槽 (folder)定义平行路由的特殊文件夹analytics,sidebar布局集成插槽作为 props 传递给布局{ children, analytics, sidebar }条件渲染基于状态动态显示不同插槽{isAdmin ? admin : user}独立状态管理每个插槽有自己的加载和错误状态team/loading.js快速上手构建仪表盘布局让我们通过一个实际的仪表盘案例来探索平行路由的强大功能。项目结构app/ ├── dashboard/ │ ├── analytics/ │ │ ├── page.js │ │ └── loading.js │ ├── sidebar/ │ │ ├── page.js │ │ └── default.js │ ├── layout.js │ ├── page.js │ └── default.js1. 定义插槽布局// app/dashboard/layout.jsexportdefaultfunctionDashboardLayout({children,analytics,sidebar}){return(div classNamedashboard-container{/* 主导航区域 */}nav classNamemain-navh1企业仪表盘/h1/navdiv classNamedashboard-content{/* 侧边栏插槽 */}aside classNamesidebar{sidebar}/aside{/* 主内容区域 */}main classNamemain-content{children}/main{/* 分析面板插槽 */}section classNameanalytics-panel{analytics}/section/div/div);}2. 创建各个插槽内容主内容区域// app/dashboard/page.jsexportdefaultfunctionDashboardPage(){return(divh2欢迎回来/h2p今日概览和重要通知.../p/div);}分析面板插槽// app/dashboard/analytics/page.jsexportdefaultfunctionAnalyticsPanel(){return(div classNameanalytics-cardh3实时数据/h3div classNamemetricsdiv classNamemetric访问量:1,234/divdiv classNamemetric转化率:68%/div/div/div);}// 独立的加载状态exportfunctionAnalyticsLoading(){returndiv classNameanalytics-card loading分析数据加载中.../div;}侧边栏插槽// app/dashboard/sidebar/page.jsexportdefaultfunctionSidebar(){return(nav classNamesidebar-navullia href/dashboard首页/a/lilia href/dashboard/analytics分析/a/lilia href/dashboard/settings设置/a/li/ul/nav);}高级特性深度探索1. 条件渲染基于用户角色的动态布局// app/dashboard/layout.jsexportdefaultfunctionDashboardLayout({children,admin,user,analytics}){constuserRolegetUserRole();// 你的权限逻辑return(div classNamedashboard-containernav classNamemain-nav.../navdiv classNamedashboard-contentaside classNamesidebar{/* 根据角色显示不同侧边栏 */}{userRoleadmin?admin:user}/asidemain classNamemain-content{children}/mainsection classNameanalytics-panel{analytics}/section/div/div);}2. 结合拦截路由实现模态框平行路由与拦截路由的结合可以创建出色的用户体验app/ ├── modal/ │ └── (.)photo/ │ └── [id]/ │ └── page.js ├── photo/ │ └── [id]/ │ └── page.js └── layout.js// app/layout.jsexportdefaultfunctionLayout({children,modal}){return(htmlbody{children}{modal}/body/html);}// app/modal/(.)photo/[id]/page.jsexportdefaultfunctionPhotoModal({params}){return(div classNamemodal-overlaydiv classNamemodal-contentimg src{/photos/${params.id}}altPreview/a href/关闭/a/div/div);}3. 错误边界和加载状态每个插槽都可以有自己的错误处理和加载状态// app/dashboard/analytics/error.jsuse client;exportdefaultfunctionAnalyticsError({error,reset}){return(div classNameanalytics-errorh3数据分析加载失败/h3button onClick{reset}重试/button/div);}// app/dashboard/analytics/loading.jsexportdefaultfunctionAnalyticsLoading(){return(div classNameanalytics-loadingdiv classNameloading-spinner/divp数据加载中.../p/div);}解决常见问题1. 硬导航后的默认内容// app/dashboard/default.jsexportdefaultfunctionDefaultDashboard(){return(divh2默认仪表盘视图/h2p这是硬导航后的回退内容/p/div);}// app/dashboard/sidebar/default.jsexportdefaultfunctionDefaultSidebar(){return(nav classNamesidebar-navullia href/dashboard首页/a/lilia href/dashboard/analytics分析/a/li/ul/nav);}2. 路由冲突避免确保不要同时存在具体路由/chat可选 catch-all 路由/chat/[[...id]]解决方案# 选择一种路由模式app/ ├── chat/ │ ├── page.js# /chat│ └──[id]/ │ └── page.js# /chat/123 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目