e想时代官方网站网站技术策划

平行路由(Parallel Routes)是 Next.js 13+ 中引入的高级路由模式，允许同时渲染多个页面或布局，非常适合构建复杂的界面布局，如仪表盘、多视图应用等。

基本概念

平行路由通过命名"插槽"(slots)实现，这些插槽在文件系统中使用 @ 前缀定义。Next.js 会将这些插槽与同一路由段的其他内容并行渲染。

核心特点：

1. 独立加载：每个平行路由可以有自己的加载状态
2. 独立错误处理：一个路由的错误不会影响其他路由
3. 条件渲染：可以基于条件动态渲染某些路由

基础示例

文件结构

app/layout.jspage.js@sidebar/page.js@main/page.js

代码实现

// app/layout.js
export default function Layout({ children, sidebar, main }) {return (<div className="app-container"><aside className="sidebar">{sidebar}</aside><section className="main-content">{main}</section><div className="additional-content">{children}</div></div>)
}

// app/@sidebar/page.js
export default function Sidebar() {return (<nav><ul><li>Menu Item 1</li><li>Menu Item 2</li><li>Menu Item 3</li></ul></nav>)
}

// app/@main/page.js
export default function MainContent() {return (<article><h1>Main Content Area</h1><p>This is the primary content section.</p></article>)
}

应用场景：管理后台布局，侧边栏导航和主内容区独立加载和更新。

高级用法

1. 条件渲染平行路由

// app/layout.js
export default function Layout({ children, sidebar, analytics }) {const showAnalytics = true // 可以从cookie或状态获取return (<div>{sidebar}<main>{children}</main>{showAnalytics && analytics}</div>)
}

应用场景：根据用户权限或偏好决定是否显示分析面板。

2. 带加载状态的平行路由

// app/@dashboard/loading.js
export default function DashboardLoading() {return <div>Loading dashboard...</div>
}// app/layout.js
export default function Layout({ dashboard }) {return (<div><Suspense fallback={<DashboardLoading />}>{dashboard}</Suspense></div>)
}

应用场景：仪表盘复杂组件需要单独加载时的优雅降级。

3. 独立错误处理

// app/@notifications/error.js
export default function NotificationsError({ error }) {return (<div className="notification-error">Failed to load notifications: {error.message}</div>)
}// app/layout.js
export default function Layout({ notifications }) {return (<div><ErrorBoundary fallback={<NotificationsError />}>{notifications}</ErrorBoundary></div>)
}

应用场景：通知组件失败不应影响整个页面渲染。

实际应用场景

场景1：社交网络主页

app/home/layout.jspage.js@sidebar/page.js@feed/page.js@trending/page.js

// app/home/layout.js
export default function HomeLayout({ sidebar, feed, trending }) {return (<div className="home-grid"><aside className="left-sidebar">{sidebar}</aside><main className="content-feed">{feed}</main><aside className="right-trending">{trending}</aside></div>)
}

优势：三个区域独立加载，互不影响，提升用户体验。

场景2：电商产品详情页

app/products/[id]/layout.jspage.js@images/page.js@details/page.js@recommendations/page.js

// app/products/[id]/layout.js
export default function ProductLayout({ images, details, recommendations }) {return (<div className="product-page"><div className="gallery">{images}</div><div className="info">{details}</div><div className="suggestions"><h3>You may also like</h3>{recommendations}</div></div>)
}

优势：产品图片、详情和推荐可以并行加载，推荐模块出错不会影响主内容显示。

最佳实践

1. 命名约定：

   • 使用 @ 前缀命名插槽文件夹
   • 保持插槽名称语义化 (@sidebar, @header 等)

2. 性能优化：

   // 为关键内容优先加载
   <Suspense fallback={<Spinner />}>{mainContent}
   </Suspense>// 非关键内容延迟加载
   <Suspense fallback={null}>{secondaryContent}
   </Suspense>
   

3. 类型安全 (TypeScript)：

   interface LayoutProps {children: React.ReactNodemodal: React.ReactNodeanalytics: React.ReactNode
   }export default function Layout({ children, modal, analytics }: LayoutProps) {// ...
   }
   

4. 组合使用拦截路由：

   // 结合平行路由和拦截路由实现复杂模态
   export default function PhotoModal({ children, photo }) {return (<>{children}<dialog open>{photo}</dialog></>)
   }
   

平行路由为构建复杂界面提供了强大的灵活性，特别适合需要多区域独立控制的大型应用。合理使用可以显著提升应用的模块化和用户体验。