编辑“︁Next.js平行路由”︁

{{Note|本节内容需要读者具备基础的[[Next.js]]路由知识，建议先学习[[Next.js文件系统路由]]章节。}}

= Next.js平行路由 =

平行路由（Parallel Routes）是Next.js 13+引入的高级路由模式，允许在同一布局中'''同时'''或'''条件性'''渲染多个独立的路由段。这种模式打破了传统线性路由的层级限制，特别适合构建复杂界面如仪表盘、多视图应用等场景。

== 核心概念 ==

平行路由的核心特征包括：
* '''独立加载'''：每个路由段拥有独立的加载状态和错误边界
* '''共享URL'''：所有平行路由段共享相同的URL路径
* '''动态组合'''：可通过条件逻辑控制不同路由段的显示

=== 与传统嵌套路由对比 ===
<mermaid>
graph LR
    A[传统嵌套路由] --> B[父布局]
    B --> C[子页面]
    C --> D[孙子页面]
    
    E[平行路由] --> F[布局]
    F --> G[路由段A]
    F --> H[路由段B]
    F --> I[路由段C]
</mermaid>

== 实现机制 ==

平行路由通过特殊的'''命名插槽'''实现。在Next.js文件系统中，使用<code>@folder</code>约定定义平行路由段：

<pre>
app/
├── @sidebar/
│   └── page.tsx
├── @content/
│   └── page.tsx
└── layout.tsx
</pre>

=== 基础示例 ===
以下是一个仪表盘布局的平行路由实现：

<syntaxhighlight lang="tsx">
// app/dashboard/layout.tsx
export default function Layout({
  children,
  sidebar,
  content
}: {
  children: React.ReactNode
  sidebar: React.ReactNode
  content: React.ReactNode
}) {
  return (
    <div className="dashboard">
      <nav className="sidebar">{sidebar}</nav>
      <main className="content">{content}</main>
      <aside className="widgets">{children}</aside>
    </div>
  )
}
</syntaxhighlight>

== 高级用法 ==

=== 条件渲染 ===
平行路由可以与React的条件渲染结合：

<syntaxhighlight lang="tsx">
// app/dashboard/layout.tsx
export default function Layout({
  sidebar,
  content
}: {
  sidebar: React.ReactNode
  content: React.ReactNode
}) {
  const [viewMode] = useViewMode() // 'full' | 'compact'
  
  return (
    <>
      {viewMode === 'full' && sidebar}
      {content}
    </>
  )
}
</syntaxhighlight>

=== 动态插槽 ===
通过插槽名称的动态计算实现更灵活的配置：

<syntaxhighlight lang="tsx">
// app/[tab]/layout.tsx
export default function Layout({
  params,
  analytics,
  settings
}: {
  params: { tab: string }
  analytics: React.ReactNode
  settings: React.ReactNode
}) {
  const CurrentTab = params.tab === 'analytics' ? analytics : settings
  
  return <div>{CurrentTab}</div>
}
</syntaxhighlight>

== 实际案例 ==

=== 案例1：可折叠侧边栏 ===
实现一个保留状态的可折叠侧边栏：

<mermaid>
stateDiagram-v2
    [*] --> Expanded
    Expanded --> Collapsed: 点击折叠按钮
    Collapsed --> Expanded: 点击展开按钮
</mermaid>

对应代码实现：
<syntaxhighlight lang="tsx">
// app/layout.tsx
'use client'

export default function Layout({
  sidebar,
  content
}: {
  sidebar: React.ReactNode
  content: React.ReactNode
}) {
  const [isExpanded, setIsExpanded] = useState(true)
  
  return (
    <div className={`container ${isExpanded ? 'expanded' : 'collapsed'}`}>
      <div className="sidebar-wrapper">
        <button onClick={() => setIsExpanded(!isExpanded)}>
          {isExpanded ? '◀' : '▶'}
        </button>
        {isExpanded && sidebar}
      </div>
      {content}
    </div>
  )
}
</syntaxhighlight>

=== 案例2：多步骤表单 ===
使用平行路由实现表单步骤的持久化状态：

<pre>
app/
├── @step1/
│   └── page.tsx
├── @step2/
│   └── page.tsx
├── @step3/
│   └── page.tsx
└── layout.tsx
</pre>

<syntaxhighlight lang="tsx">
// app/layout.tsx
export default function FormWizard({
  step1,
  step2,
  step3,
  params
}: {
  step1: React.ReactNode
  step2: React.ReactNode
  step3: React.ReactNode
  params: { step: string }
}) {
  return (
    <form>
      {params.step === '1' && step1}
      {params.step === '2' && step2}
      {params.step === '3' && step3}
    </form>
  )
}
</syntaxhighlight>

== 性能考量 ==

平行路由通过'''路由段隔离'''带来多项性能优势：
* '''更细粒度的加载'''：每个路由段有独立的<code>loading.tsx</code>
* '''局部更新'''：仅重新渲染变更的路由段
* '''预加载控制'''：可通过<code>prefetch</code>单独控制

数学表达并行加载效益：
<math>
T_{parallel} = \max(T_1, T_2, ..., T_n)
</math>
<math>
T_{sequential} = \sum_{i=1}^{n} T_i
</math>

其中<math>T_n</math>表示第n个路由段的加载时间。

== 常见问题 ==

{{Warning|平行路由仍在演进中，需注意以下限制：}}

* '''TypeScript类型'''：需要手动定义插槽props类型
* '''默认路由'''：未匹配时会渲染<code>default.js</code>或空白
* '''服务器组件'''：平行路由段默认是服务器组件

== 最佳实践 ==

1. '''命名一致性'''：保持插槽名称与目录名一致
2. '''错误隔离'''：为每个路由段添加<code>error.tsx</code>
3. '''加载状态'''：设计有意义的加载指示器
4. '''URL设计'''：合理规划路由参数

{{Tip|使用平行路由时，建议配合React Developer Tools观察组件树结构变化。}}

== 进阶阅读 ==

* Next.js官方文档：Parallel Routes RFC
* React模式：Composition vs Inheritance
* 前端架构：Micro Frontends设计模式

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js路由系统]]