Parallel routes và intercepting routes là gì?

Question

Accepted Answer

Đây là hai tính năng App Router nâng cao cho các layout UI tinh vi. Chúng chia sẻ một cú pháp dựa trên quy ước thư mục. ## Parallel Routes (@folder) — render nhiều page trong một layout Parallel routes cho phép một layout duy nhất render **nhiều "slot" route độc lập đồng thời**, mỗi cái có loading/error state riêng. Bạn định nghĩa slot bằng các thư mục `@name`: ```text app/ layout.tsx @team/page.tsx → a slot @analytics/page.tsx → another slot ``` ```tsx // app/layout.tsx — các slot được truyền dưới dạng named props export default function Layout({ children, team, // ← slot @team analytics, // ← slot @analytics }: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) { return <>

{children} ; } ``` Mỗi slot điều hướng và tải **độc lập** — rất hợp cho **dashboard** nơi các panel cập nhật riêng rẽ, hoặc hiển thị hai mục cùng lúc. ## Intercepting Routes ((.)folder) — phủ một route mà không rời trang hiện tại Intercepting routes cho phép bạn "bắt" một lần điều hướng và render nó **trong ngữ cảnh hiện tại** (ví dụ một modal) thay vì một trang đầy đủ — trong khi vẫn có một URL thật, chia sẻ được. ```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) ``` Các dấu interception (`(.)` cùng cấp, `(..)` lên một cấp, `(...)` root) điều khiển segment nào bị chặn. Đây chính xác là cách mô hình kiểu Instagram "ảnh mở trong modal nhưng có URL riêng" hoạt động. ## Tại sao điều này quan trọng Parallel routes cho phép các layout đa khung phức tạp, tải độc lập (dashboard) một cách gọn gàng; intercepting routes mang lại mô hình "modal có URL thật" (chia sẻ được, an toàn khi refresh, thân thiện với nút back) vốn rất khó xây bằng cách khác. Chúng là nâng cao, nhưng giải quyết các vấn đề UX thực — panel độc lập và overlay theo ngữ cảnh — vốn trước đây đòi hỏi nhiều công routing/state thủ công.