清风自叙小筑

Appearance

Next.js 平行路由 ​

在同一 layout.tsx 中同时渲染多个页面，类似 Vue 的 router-view。

核心概念 ​

用 @ 前缀文件夹定义平行路由槽，不影响 URL 路径。

app/
  @team/page.tsx       → team 槽
  @analytics/page.tsx  → analytics 槽
  layout.tsx           → 接收 team / analytics props

layout.tsx 中渲染 ​

tsx
export default function RootLayout({
  children,
  team,
  analytics,
}: {
  children: React.ReactNode
  team: React.ReactNode
  analytics: React.ReactNode
}) {
  return (
    <html>
      <body>
        {team}
        {children}
        {analytics}
      </body>
    </html>
  )
}

解构的变量名必须与 @文件夹 名称一致。

独立能力 ​

每个平行路由可独立拥有：

@team/
  page.tsx
  loading.tsx   → 独立加载状态
  error.tsx     → 独立错误处理

default.tsx ​

平行路由的子导航需要 default.tsx 兜底：

@team/
  default.tsx      → 兜底页面（类似 index）
  setting/page.tsx  → @team/setting

使用场景 ​

场景示例
仪表盘@stats + @revenue + @recent
多面板布局@sidebar + @main + @panel
条件渲染登录前/后显示不同 @槽 内容