Kaip veikia failų sistemai pagrįstas rutavimas (file-based routing) App Router?

Question

Accepted Answer

App Router sistemoje, **`app/` aplanke esanti aplankų struktūra apibrėžia jūsų maršrutus** — nereikia rašyti jokios maršrutizatoriaus konfigūracijos. Kiekvienas aplankas yra URL segmentas, o specialūs failai jame apibrėžia, kas tas segmentas renderiazs. ## Aplankai = URL segmentai ```text app/ page.tsx → / about/page.tsx → /about blog/page.tsx → /blog blog/[slug]/page.tsx → /blog/:slug (dynamic segment) shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL) ``` ## Specialūs failai Kiekvienas aplankas gali turėti rezervuotus failų pavadinimus, kiekvienas su specifine funkcija: ```text page.tsx → the route's UI (REQUIRED to make a segment routable) layout.tsx → shared wrapper that persists across child routes loading.tsx → loading UI (auto-wraps the page in ) error.tsx → error boundary for the segment not-found.tsx→ 404 UI route.ts → an API endpoint (instead of a page) ``` ## Dinaminiai segmentai ```tsx // app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything export default function Post({ params }: { params: { slug: string } }) { return

Post: {params.slug}

; // params.slug = "hello" } ``` Kvadratinius skliaustelius sukuria dinaminį parametrą, kuris perduodamas puslapiui per `params`. Variacijos: `[...slug]` (catch-all), `[[...slug]]` (optional catch-all). ## Maršrutų grupės ir organizacija ```text app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL) ``` Skliausteliai sukuria **maršrutų grupes**, skirtas failams organizuoti arba skirtingiems išdėstyams (layout) taikyti nepaveikiant URL. ## Kodėl tai svarbu Failų sistemai pagrįstas rutavimas daro URL struktūrą akivaizdžią iš failų medžio — nereikia prižiūrėti ir sinchronizuoti jokios centrinės maršruto konfigūracijos. Žinojimas apie specialius failų pavadinimus (`page`, `layout`, `loading`, `error`, `route`) ir skliaustelyčių taisykles (`[param]`, `[...catchAll]`, `(group)`) yra pagrindinė žodynas, skirtas bet kokiai App Router programėlei kurti.