Rute avansate: parallel și intercepting
Sloturi @, default.tsx, rute interceptate și modale cu URL propriu.
Actualizat
Ce sunt rutele avansate
Pe lângă rutele obișnuite (Routing), App Router are două convenții pentru interfețe complexe:
| Convenție | Ce face | Exemplu clasic |
|---|---|---|
Parallel routes (@slot) |
randează mai multe pagini simultan în același layout, fiecare navigabilă independent | dashboard cu panouri, sidebar + conținut cu stări separate |
Intercepting routes ((.)) |
afișează o rută în contextul paginii curente (de obicei ca modal), dar păstrează URL-ul real | click pe o poză din feed → modal; refresh pe același URL → pagina completă a pozei |
Parallel routes — sloturi
Un folder care începe cu @ e un slot. Nu apare în URL; e trimis ca prop layout-ului părinte.
app/dashboard/layout.tsxprimește children, analytics și teampage.tsx/dashboard — slotul implicit children@analytics/page.tsxdefault.tsxce se afișează când slotul nu are o potrivire
@team/page.tsxdefault.tsx
export default function DashboardLayout({ children, analytics, team }: LayoutProps<'/dashboard'>) {
return (
<div className="grid grid-cols-2 gap-6">
{children}
{analytics}
{team}
</div>
)
}| Detaliu | De ce contează |
|---|---|
fiecare slot poate avea propriul loading.tsx și error.tsx |
panourile se încarcă și eșuează independent |
default.tsx |
la reload pe o sub-rută, sloturile fără potrivire afișează default (altfel: 404) |
| sloturile nu afectează URL-ul | @analytics/views → /dashboard/views |
Bun și pentru afișare condiționată: layout-ul alege {isAdmin ? admin : user}.
Intercepting routes — modal cu URL
app/feed/page.tsxlista de poze
photo/[id]/page.tsxpagina completă a pozei — la refresh sau link direct
@modal/default.tsxreturn null — fără modal implicit(.)photo/[id]/page.tsxaceeași poză, ca modal peste feed
layout.tsxrandează children + modal
| Marcaj | Interceptează segmentul |
|---|---|
(.) |
de pe același nivel |
(..) |
cu un nivel mai sus |
(..)(..) |
cu două nivele mai sus |
(...) |
de la rădăcina app |
Nivelurile sunt segmente de rută, nu foldere — sloturile @modal nu se numără.
Comportamentul:
| Acțiune | Rezultat |
|---|---|
click pe <Link href="/photo/7"> din feed |
URL devine /photo/7, se deschide modalul peste feed |
| refresh / link trimis cuiva | se afișează pagina completă /photo/7 |
| Back / închidere | router.back() — modalul dispare, feed-ul e intact |
Exact cum funcționează pozele pe Instagram sau produsele pe un site de cumpărături.
Când le folosești
- Parallel: interfețe cu zone independente (dashboard, inbox cu listă + detaliu), tab-uri cu URL propriu.
- Intercepting: modale care trebuie să poată fi trimise ca link (preview produs, poză, login peste pagina curentă).
- Altfel: rute simple — sunt mai ușor de înțeles.
Pe scurt
@slot= pagini randate în paralel, prop pe layout, cudefault.tsx.(.)/(..)/(...)= rută interceptată, de obicei ca modal, cu URL real.- Modal cu URL: slot
@modal+ rută interceptată +router.back()la închidere.