Ce sunt rutele paralele și rutele de interceptare?

Question

Accepted Answer

Acestea sunt două caracteristici avansate ale App Router pentru aspecte sofisticate. Ele împart o sintaxă de convenție folder. ## De ce este important Rutele paralele activează aspect multi-panou complexe, încărcate independent (tablouri de bord) în mod curat; rutele de interceptare livrează modelul "modal cu un URL real" (partajabil, sigur la reîmprospătare, prietenos cu butonul înapoi) care altfel ar fi dificil de construit. Sunt avansate, dar rezolvă probleme reale de UX — panouri independente și suprapuneri contextuale — care anterior necesitau muncă semnificativă de rutare/stare manuală. ## Rute Paralele (@folder) — redați mai multe pagini într-un aspect Rutele paralele permit unui aspect singular să **redeze mai multe "sloturi" de rută independente simultan**, fiecare cu propria stare de încărcare/eroare. Definiți sloturi cu dosare `@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} ; } ``` Fiecare slot navighează și se încarcă **independent** — grozav pentru **tablouri de bord** unde panourile se actualizează separat, sau arătând două secțiuni deodată. ## Rute de Interceptare ((.)folder) — suprapu o rută fără a lăsa pagina curentă Rutele de interceptare vă permit să "prindeți" o navigație și să o redați **în contextul curent** (de exemplu, o fereastră modală) în loc de o pagină completă — în timp ce încă aveți un URL real și partajabil. ```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) ``` Maratorii de interceptare (`(.)` același nivel, `(..)` unu mai sus, `(...)` rădăcină) controlează care segment este interceptat. Aceasta este exact cum funcționează modelul în stil Instagram "fotografia se deschide într-o fereastră modală dar are propriul URL".