Next.js 15 Parallel Routes 与 Interception 路由治理实践 slot 与拦截

YBB 11 阅读 0 评论 0 点赞

核心价值并行路由通过命名 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 (

<h2>产品 {params.id}</h2>

</article>

</dialog>

)

}

普通详情页// app/products/[id]/page.tsx

export default async function Product({ params }: { params: { id: string } }) {

return <article><h1>产品 {params.id}</h1></article>

}

治理建议slot 名称与布局层级需明确，避免过度嵌套造成复杂度。拦截路径仅用于需要保留当前上下文的叠加场景（如模态、侧栏）。结论并行路由与拦截配合可在不破坏导航上下文的情况下实现丰富的叠加体验，适合详情预览与快速交互场景。

点赞(0) 打赏

Next.js 15 Parallel Routes 与 Interception 路由治理实践 slot 与 拦截