Paralel ve kesişen yollar nedir?

Question

Accepted Answer

Bunlar, geliştiş UI düzenleri için App Router'ın iki gelişmiş özelliğidir. Bunlar klasör-konvansyon söz dizimini paylaşırlar. ## Paralel Yollar (@folder) — bir düzende birden çok sayfayı işle Paralel yollar, tek bir düzenin **birden çok bağımsız rota "yuvası" aynı anda işlemesine** izin verir; her biri kendi yükleme/hata durumuna sahip. `@name` klasörleriyle yuvaları tanımlarsınız: ```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} ; } ``` Her yuva **bağımsız olarak** navigasyon yapar ve yüklenir — panellerin ayrı ayrı güncellendiği **panolarda** harika veya aynı anda iki bölümü göstermek için. ## Kesişen Yollar ((.)folder) — geçerli sayfayı bırakmadan bir yolu katmanlaştır Kesişen yollar, bir navigasyonu "yakalamak" ve bunu **geçerli bağlam**ta (ör. modal) tam bir sayfa yerine işlemenize izin verir — yine de gerçek, paylaşılabilir bir URL'ye sahip olursunuz. ```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) ``` Kesişme işaretçileri (`(.)` aynı seviye, `(..)` bir yukarı, `(...)` kök) hangi segmentin kesiştiğini kontrol eder. Bu tam olarak "Instagram-tarzı — fotoğraf modalda açılır ama kendi URL'sine sahip" deseninin nasıl çalıştığıdır. ## Neden önemli Paralel yollar, karmaşık, bağımsız yüklenen çok bölmeli düzenleri (panolar) temiz bir şekilde etkinleştirir; kesişen yollar, "gerçek URL'ye sahip modal" deseni (paylaşılabilir, yenileme için güvenli, geri düğmesi dostu) sağlar; aksi takdirde bunu oluşturmak zor olacaktır. Bunlar ilerlemiş özellikler, ancak gerçek UX sorunlarını çözerler — bağımsız panolar ve bağlamsal katmanlar — bu da daha önce önemli miktarda manuel yönlendirme/durum çalışması gerektiriyordu.