[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}</> } ``` > 根据不同角色显示不同路由