核心价值并行路由通过命名 slot 在同一层级渲染多个树，支持模态等叠加 UI。拦截路由 `( .. )` 在导航到新页面时保留当前上下文并以叠加方式呈现目标内容。slot 布局// app/layout.tsx export default function RootLayout({ children, modal }: { children: React.ReactNode; modal: React.ReactNode }) { return ( <html> <body> <main>{children}</main> <div id="layer-modal">{modal}</div> </body> </html> ) } 模态页面// app/@modal/(..)products/[id]/page.tsx export default function ProductModal({ params }: { params: { id: string } }) { return ( <dialog open> <article> <h2>产品 {params.id}</h2> <a href="/products">关闭</a> </article> </dialog> ) } 普通详情页// app/products/[id]/page.tsx export default async function Product({ params }: { params: { id: string } }) { return <article><h1>产品 {params.id}</h1></article> } 治理建议slot 名称与布局层级需明确，避免过度嵌套造成复杂度。拦截路径仅用于需要保留当前上下文的叠加场景（如模态、侧栏）。结论并行路由与拦截配合可在不破坏导航上下文的情况下实现丰富的叠加体验，适合详情预览与快速交互场景。
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复