Apa itu rute paralel dan rute penyadapan?

Question

Accepted Answer

Ini adalah dua fitur App Router canggih untuk tata letak UI yang canggih. Mereka berbagi sintaks konvensi folder. ## Rute Paralel (@folder) — render beberapa halaman dalam satu tata letak Rute paralel memungkinkan satu tata letak untuk **merender beberapa "slot" rute independen secara bersamaan**, masing-masing dengan status loading/error-nya sendiri. Anda menentukan slot dengan folder `@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} ; } ``` Setiap slot menavigasi dan memuat **secara independen** — bagus untuk **dashboard** di mana panel diperbarui secara terpisah, atau menampilkan dua bagian sekaligus. ## Rute Penyadapan ((.)folder) — menumpang tindih rute tanpa meninggalkan halaman saat ini Rute penyadapan memungkinkan Anda untuk "menangkap" navigasi dan merendernya **dalam konteks saat ini** (mis. modal) alih-alih halaman penuh — sambil tetap memiliki URL yang nyata dan dapat dibagikan. ```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) ``` Penanda penyadapan (`(.)` level yang sama, `(..)` satu level atas, `(...)` akar) mengontrol segmen mana yang disadap. Ini persis bagaimana pola "foto terbuka di modal tetapi memiliki URL-nya sendiri" gaya Instagram berfungsi. ## Mengapa ini penting Rute paralel memungkinkan tata letak multi-panel yang kompleks dan memuat secara independen (dashboard) dengan bersih; rute penyadapan memberikan pola "modal dengan URL nyata" (dapat dibagikan, aman-refresh, ramah-tombol-kembali) yang sebaliknya sulit untuk dibangun. Mereka canggih, tetapi mereka menyelesaikan masalah UX nyata — panel independen dan overlay kontekstual — yang sebelumnya memerlukan pekerjaan perutean/status manual yang signifikan.