[TOC] ## 概述 主要特點: * 并行路由使用@folder命名約定 * 每個并行路由可以有自己的 loading、error 和layout 組件 * 可以實現條件渲染和模態框等復雜UI模式 * 適合實現分離的導航狀態 使用場景: * 儀表板中同時顯示多個獨立部分 * 社交媒體feed和詳情的同時展示 * 模態框和頁面內容的并行顯示 ## 示例 ### hello world 目錄 ``` app/ ├── @team/ │ └── page.tsx ├── @analytics/ │ └── page.tsx ├── layout.tsx └── page.tsx ``` layout.tsx ``` export default function Layout(props: { children: React.ReactNode team: React.ReactNode analytics: React.ReactNode }) { return ( <div> {/* 主內容 */} {props.children} {/* 并行路由內容 */} <div className="flex"> {props.team} {props.analytics} </div> </div> ) } ``` ### 根據角色 ``` import { checkUserRole } from '@/lib/auth' export default function Layout({ user, admin, }: { user: React.ReactNode admin: React.ReactNode }) { const role = checkUserRole() return <>{role === 'admin' ? admin : user}</> } ``` > 根據不同角色顯示不同路由