Navigation API: Modern Tarayıcılar
Gezinmeleri yakalayıp özelleştirmek için Navigation API'yi kullanın
Navigation API: Modern Tarayıcılar, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Modern Bir Alternatif
Gezinme API'si, Geçmiş API'sinin daha yeni ve daha güçlü bir alternatifidir. Gezinmeleri yakalayabileceğiniz, iptal edebileceğiniz ve bekleyebileceğiniz birinci sınıf nesneler olarak ele alır — SPA'lerin 2024'te yönlendirmeyi gerçekten ele alma biçimine daha yakındır.
window.navigation Nesnesi
window.navigation, kayıt listesini, mevcut kaydı ve navigate olayını sunar. navigation.entries(), mevcut geçmişteki tüm kayıtları döndürür; navigation.currentEntry etkin olan kayıttır. Bunu, Geçmiş API'sinin içeriği açıklanmayan length değeri ve okunamayan durum bilgisiyle karşılaştırabilirsiniz.
Gezinme Olayı
navigation.addEventListener("navigate", handler) ile aynı belge içindeki her gezinmeyi — bağlantı tıklamalarını, form gönderimlerini, geri ve ileri gezinmeleri ve programatik gezinmeleri — yakalayabilirsiniz. Tek bir kanca, tıklama yakalama, geçmiş gezinme olayı ve form gönderimi dinleyicilerinin parça parça birleşiminin yerini alır.
navigation.addEventListener("navigate", (e) => {
if (!e.canIntercept) return;
e.intercept({
handler: async () => {
await renderPage(new URL(e.destination.url).pathname);
}
});
});intercept ve İşleyici
e.intercept({ handler }) çağrısı gezinmeyi üstlenir. İşleyici bir vaat döndürür; beklemede olduğu sürece gezinme "devam ediyor" durumundadır ve adres zaten güncellenmiştir. Böylece adres değişikliği ile görünümün oluşturulması arasındaki geçmişten kalan yarış durumu tek bir yapıda birleştirilir.
canIntercept Kontrolü
Her gezinme yakalanamaz (farklı kaynaklı gezinmeler ve indirmeler). intercept çağrısı yapmadan önce e.canIntercept değerini kontrol edin. Bu koruyucu tek satırlık kontrol, SPA gezinmesini gerçek farklı kaynaklı ayrılmalardan ayırır.
navigation.navigate Yöntemi
navigation.navigate(url, options), tıklamaya eşdeğer şekilde programatik olarak bir gezinme başlatır. Döndürülen nesnede committed ve finished vaatleri bulunur; böylece adres değişikliğini veya işleyicinin tamamlanmasını bekleyebilirsiniz.
Kayıt Durumu ve Anahtarlar
Her gezinme kaydının kararlı bir key değeri (yenilemeler arasında da geçerli) ve bir id değeri (oturum başına) vardır. Kalıcı durum için key'i (kaydedilmiş kaydırma konumları ve form taslakları gibi), geçici durum için id'yi kullanın. Geçmiş API'sindeki tek durum bilgisi, içeriği belirsiz bir veri yığınıydı.
Geri ve İleri Gezinme
navigation.back() ve navigation.forward(), traverseTo etrafındaki kolaylık sarmalayıcılarıdır. Aynı { committed, finished } vaat çiftini döndürürler; böylece devamında yapacağınız işlemleri gerçekleştirmeden önce geri gezinmenin tamamlanmasını bekleyebilirsiniz.
Gezinmeleri İptal Etme
Kullanıcı, ilk bağlantı hâlâ oluşturulurken ikinci bir bağlantıya tıklarsa devam eden gezinme iptal edilebilir. İşleyici, e.signal üzerinden bir AbortSignal alır; yeni gezinme başladığında artık geçerli olmayan çalışmaların iptal edilmesi için bunu fetch çağrılarına aktarınız.
e.intercept({
handler: async () => {
const data = await fetch(url, { signal: e.signal });
renderPage(await data.json());
}
});Neden Yalnızca Geçmişi Kullanmayalım?
Geçmiş API'si çalışır ancak kullanımı zahmetlidir: durum değişiklikleri ile görünüm oluşturma birbirinden kopuktur, tıklama işleme el ile yapılır, birden çok dinleyicinin eşgüdümü kırılgandır ve kaydırma konumunun geri yüklenmesi eksiktir. Gezinme API'si baştan SPA gereksinimleri için tasarlanmış ve bunların her birini ele almıştır.
Tarayıcı Desteği
Chrome ve Edge, Gezinme API'sini destekler. Safari ve Firefox geride kalmaktadır (2026'nın başı itibarıyla); özellik algılaması yapan ("navigation" in window) ve kullanılamadığında Geçmiş + durum değişikliği olayı yaklaşımına geri dönen kod yayımlayınız. SvelteKit ve TanStack Router gibi çatılar bu algılamayı zaten kapsar.
Ne Zaman Benimsenmeli
Chromium öncelikli kitleleri hedefleyen yeni projeler için şimdi benimseyiniz ve Geçmiş geri dönüşünü kabul ediniz. Geniş kitlelere yönelik herkese açık sitelerde Safari/Firefox desteğini bekleyiniz (veya her ikisini soyutlayan bir yönlendirici kitaplığı kullanınız). Daha yalın API beklemeye değerdir.
Bilgi Kontrolü
Gezinme API'sinin navigate olayının, Geçmiş API'sindeki popstate ile el ile tıklama yakalamanın birleşimine göre temel avantajı nedir?
Özet
Gezinme API'si, SPA gezinmesini intercept/abort anlamları, her giriş için kararlı anahtarlar ve asenkron işleyicilerin beklenmesiyle tek bir navigate olayında birleştirir. Geçmiş + durum değişikliği olayı + tıklama yakalama yamalarından oluşan karmaşanın yerini alır. Günümüzde Chromium tarayıcılarında desteklenmektedir; Safari ve Firefox yetişene kadar tarayıcılar arası kod için özellik algılaması yapınız ve Geçmiş'e geri dönünüz.
Sıkça Sorulan Sorular
“Navigation API: Modern Tarayıcılar” dersi ücretsiz mi?
Evet — “Navigation API: Modern Tarayıcılar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“Navigation API: Modern Tarayıcılar” dersinde ne öğreneceğim?
Gezinmeleri yakalayıp özelleştirmek için Navigation API'yi kullanın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Navigation API: Modern Tarayıcılar” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- pushState ve replaceState
- popstate Olayı
- Hash Tabanlı ve Yol Tabanlı Yönlendirme Karşılaştırması
- Navigation API: Modern Tarayıcılar