什么是并行路由和拦截路由？

Question

什么是并行路由和拦截路由？

Accepted Answer

这两个是 App Router 的高级功能，用于复杂的 UI 布局。它们共享一个文件夹约定语法。 ## 并行路由 (@folder) — 在一个布局中渲染多个页面并行路由让单个布局能够**同时渲染多个独立的路由"插槽"**，每个插槽都有自己的 loading/error 状态。您使用 `@name` 文件夹定义插槽： ```text app/ layout.tsx @team/page.tsx → a slot @analytics/page.tsx → another slot ``` ```tsx // app/layout.tsx — slots are passed as named props export default function Layout({ children, team, // ← @team slot analytics, // ← @analytics slot }: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) { return <>

{children} ; } ``` 每个插槽**独立地**导航和加载——非常适合**仪表板**，其中面板可以分别更新，或同时显示两个部分。 ## 拦截路由 ((.)folder) — 不离开当前页面就覆盖一个路由拦截路由让您能够"捕获"导航，并在**当前上下文中**渲染它（例如模态框），而不是跳转到完整页面——同时仍然拥有真实的、可共享的 URL。 ```text app/feed/page.tsx app/feed/(..)photo/[id]/page.tsx → intercepts /photo/[id] when navigated from the feed app/photo/[id]/page.tsx → the full page (on direct visit / refresh) ``` ```text Click a photo in the feed → opens as a MODAL over the feed (intercepted), URL = /photo/123 Refresh or share that URL → renders the FULL photo page (no interception) ``` 拦截标记（`(.)` 同一级别，`(..)` 上一级，`(...)` 根）控制拦截哪个段。这正是 Instagram 风格的"照片在模态框中打开但有自己的 URL"模式的工作原理。 ## 为什么这很重要并行路由能够简洁地实现复杂的、独立加载的多窗格布局（仪表板）；拦截路由提供"带真实 URL 的模态框"模式（可共享、刷新安全、返回按钮友好），否则很难构建。它们是高级功能，但它们解决了真实的 UX 问题——独立面板和上下文覆盖——这些问题以前需要大量的手动路由/状态工作。