Kesen Rotalar (Intercepting Routes)
Last updated
Last updated
Rotaları kesmek, geçerli sayfanın bağlamını korurken geçerli düzen içinde bir rota yüklemenize olanak tanır. Bu yönlendirme paradigması, farklı bir rota göstermek için belirli bir rotayı "kesmek" istediğinizde yararlı olabilir.
Örneğin, bir beslemenin içinden bir fotoğrafa tıklandığında, beslemeyi kaplayan bir modal fotoğrafla birlikte görünmelidir. Bu durumda Next.js, /feed yolunu keser ve bunun yerine /photo/123 göstermek için bu URL'yi "maskeler".
Ancak, örneğin paylaşılabilir bir URL'ye tıklayarak veya sayfayı yenileyerek doğrudan fotoğrafa gidildiğinde, modal yerine fotoğraf sayfasının tamamı render edilmelidir. Herhangi bir rota müdahalesi gerçekleşmemelidir.
Kesişen rotalar, göreli yol kuralı ../'ye benzeyen ancak segmentler için olan (..) kuralı ile tanımlanabilir.
Şu şekillerde Kullanabilirsiniz:
(.) aynı seviyedeki segmentleri eşleştirmek için
(..) bir üst seviyedeki segmentlerle eşleştirmek için
(..)(..) iki seviye yukarıdaki segmentlerle eşleştirmek için
(...) kök uygulama dizinindeki segmentleri eşleştirmek için
Örneğin, bir (..)photo dizini oluşturarak fotoğraf segmentini besleme segmenti içinden kesebilirsiniz.
(..) kuralının dosya sistemini değil, yol segmentlerini temel aldığını unutmayın.
Yakalama Rotaları, modaller oluşturmak için Paralel Rotalar ile birlikte kullanılabilir.
Bu kalıbı kullanarak modaller oluşturmak, modallerle çalışırken karşılaşılan bazı zorlukların üstesinden gelmenizi sağlar:
Modal içeriği bir URL aracılığıyla paylaşılabilir hale getirin
Sayfa yenilendiğinde, modalı kapatmak yerine bağlamı koruyun
Önceki rotaya gitmek yerine geriye doğru gezinmede modalı kapatın
İleriye doğru gezinme modalini yeniden açma
Yukarıdaki örnekte, @modal bir segment değil bir slot olduğu için photo segmentine giden yol (..) eşleştiricisini kullanabilir. Bu, iki dosya sistemi seviyesi daha yüksek olmasına rağmen photo yolunun yalnızca bir segment seviyesi daha yüksek olduğu anlamına gelir.
Diğer örnekler arasında, özel bir /login sayfasına sahipken üst navbarda bir oturum açma modalı açmak veya bir yan modalda bir alışveriş sepeti açmak sayılabilir.
