Czym są trasy równoległe i przechodzące?

Question

Accepted Answer

To dwa zaawansowane rozwiązania App Router dla skomplikowanych układów interfejsu. Współdzielą składnię oparte na konwencji folderów. ## Dlaczego to ważne Trasy równoległe umożliwiają czystą implementację złożonych, niezależnie ładujących się wielopanelowych układów (dashboardy); trasy przechodzące dostarczają wzorzec "modal z rzeczywistym URL-em" (możliwością udostępniania, bezpiecznym odświeżaniem, przyjaznym przyciskowi wstecz), który w inny sposób byłby trudny do zbudowania. Są zaawansowane, ale rozwiązują realne problemy UX — niezależne panele i nakładki kontekstowe — które wcześniej wymagały znacznej ręcznej pracy z routingiem/stanem. ## Trasy równoległe (@folder) — renderuj wiele stron w jednym layoutzie Trasy równoległe pozwalają pojedynczemu layoutowi **renderować wiele niezależnych "slotów" rut jednocześnie**, każdy z własnym stanem ładowania/błędu. Definiujesz sloty za pomocą folderów `@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} ; } ``` Każdy slot nawiguje i ładuje się **niezależnie** — świetnie dla **dashboardów**, gdzie panele aktualizują się osobno, lub pokazując dwie sekcje jednocześnie. ## Trasy przechodzące ((.)folder) — nałóż trasę bez opuszczania bieżącej strony Trasy przechodzące pozwalają Ci "przechwyć" nawigację i renderować ją **w bieżącym kontekście** (np. modal) zamiast pełnej strony — a jednocześnie posiadać rzeczywisty, udostępnialny 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) ``` Markery przechodzenia (`(.)` ten sam poziom, `(..)` jeden wyżej, `(...)` root) kontrolują, który segment jest przechwytywany. To dokładnie jak działa wzorzec w stylu Instagrama "zdjęcie otwiera się w modalu, ale ma własny URL".