Mitä ovat rinnakkaiset ja sieppaavat reitit?

Question

Accepted Answer

Nämä ovat kaksi kehittynyttä App Router -ominaisuutta kehittyneille käyttöliittymän asetteluille. Ne jakavat kansio-konventiosyntaksin. ## Rinnakkaiset reitit (@folder) — useamman sivun renderöinti yhdessä asettelussa Rinnakkaiset reitit antavat yhdelle asettelulle mahdollisuuden renderöidä **useita itsenäisiä reitin "paikkoja" samanaikaisesti**, joista jokaisella on oma lataus-/virhetilansa. Määrität paikat `@name` kansioilla: ```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} ; } ``` Jokaisella paikalla navigoidaan ja ladataan **itsenäisesti** — loistava **koontinäytöille**, joissa paneelit päivittyvät erikseen, tai näyttää kaksi osaa kerralla. ## Sieppaavat reitit ((.)folder) — reitin päällekkäisyys poistumatta nykyiseltä sivulta Sieppaavat reitit antavat sinulle mahdollisuuden "siepata" navigaatio ja renderöidä se **nykyisessä kontekstissa** (esim. modaalissa) koko sivun sijaan — samalla säilyttäen todellisen, jaettavan URL-osoitteen. ```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) ``` Sieppaavat merkinnät (`(.)` sama taso, `(..)` yksi taso ylemmäs, `(...)` juuri) hallitsevat, mikä segmentti sieppataan. Näin toimii täsmälleen Instagram-tyylinen "kuva avautuu modaalissa, mutta sillä on oma URL" -malli. ## Miksi se on tärkeää Rinnakkaiset reitit mahdollistavat monimutkaiset, itsenäisesti latautuvat monipaneeliasettelut (koontinäytöt) siististi; sieppaavat reitit toimittavat "moduuli todellisella URL-osoitteella" -mallin (jaettava, päivitysturvallinen, takaisin-painike-ystävällinen), jota olisi muutoin vaikea rakentaa. Ne ovat edistyneitä, mutta ne ratkaisevat todellisia käyttäjäkokemuksen ongelmia — itsenäiset paneelit ja kontekstisidonnaiset päällekkäisyydet — joita aikaisemmin vaatisi huomattavaa manuaalista reititys-/tila-työtä.