Mit jelent a párhuzamos és az elfogó útvonalak?

Question

Accepted Answer

Ezek az App Router két fejlett funkciója a kifinomult felhasználói felület elrendezésekhez. Megosztanak egy mappa-konvención alapuló szintaxist. ## Párhuzamos útvonalak (@folder) — több oldal megjelenítése egy elrendezésben A párhuzamos útvonalak lehetővé teszik, hogy egy elrendezés **több független útvonal "helyöt" jelenítsen meg egyidejűleg**, mindegyik saját betöltési/hiba-állapottal. Az `@name` mappákkal definiálja a helyöket: ```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} ; } ``` Minden helyöt **függetlenül** navigál és tölt be — remek az **irányítópultokhoz**, ahol a panelok külön frissülnek, vagy egyszerre két részt mutat meg. ## Elfogó útvonalak ((.)folder) — útvonal rátétezése az aktuális oldal elhagyása nélkül Az elfogó útvonalak lehetővé teszik a navigáció "elfogását" és az **aktuális kontextusban** (pl. modális) megjelenítését egy teljes oldal helyett — miközben még mindig van egy valódi, megosztható URL-je. ```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) ``` Az elfogó jelölések (`(.)` ugyanaz a szint, `(..)` egy felfelé, `(...)` gyökér) szabályozzák, hogy melyik szegmens lesz elfogva. Ez pontosan az, hogy az Instagram-stílusú "fotó megnyílik egy modálisban, de saját URL-je van" minta működik. ## Miért fontos A párhuzamos útvonalak lehetővé teszik az összetett, függetlenül betöltődő többpaneles elrendezéseket (irányítópultok) tisztán; az elfogó útvonalak a "valódi URL-lel rendelkező modális" mintát biztosítják (megosztható, frissítésre biztonságos, vissza-gomb-barát), amely egyébként nehéz lenne felépíteni. Ezek fejlettebb megoldások, de valós UX-problémákat oldanak meg — független panelokat és kontextuális rátéteket —, amelyekhez korábban jelentős manuális útválasztási/állapot-munka szükséges volt.