Özet - History API

JavaScript kursu · İleri seviye · Ders 83/100

pushState ve popstate ile iki sayfalı basit bir SPA yönlendirme uygulaması yazarsın.

Özet - History API

Bu grupta History API'nin temellerini öğrendin: history nesnesi oturum geçmişine erişim sağlar; pushState yeni kayıt ekler ve URL'i değiştirir; replaceState mevcut kaydı günceller; popstate geri veya ileri gezinmede tetiklenir.

history.pushState({path}, '', '/about');
window.addEventListener('popstate', (e) => {
  render(e.state.path);
});

Bunları birleştirerek sayfa yenilenmeden çalışan basit bir SPA yönlendirici kurarsın.

Uygulama router fonksiyonu yaz

router(path) adında bir fonksiyon yaz. İçinde history.pushState çağrısı yapsın: ilk parametre { path }, ikinci parametre boş dize, üçüncü parametre path. Sonra render(path) çağrısıyla görünümü güncellesin.

Örnek çözümü göster

function router(path) {
  history.pushState({ path }, '', path);
  render(path);
}

Hepsini birleştir

Bir SPA yönlendiricinin akışı şöyledir: bağlantı tıklanır, preventDefault ile yeniden yükleme engellenir, pushState ile URL güncellenir ve render ile görünüm değiştirilir. Geri veya ileri sırasında popstate tetiklenir ve event.state'ten yola çıkılarak doğru görünüm çizilir.

function router(path) {
  history.pushState({ path }, '', path);
  render(path);
}
window.addEventListener('popstate', (e) => {
  if (e.state) router(e.state.path);
});

Bu yapı, modern istemci tarafı yönlendirmenin özüdür.

Uygulama popstate ile görünümü geri yükle

window nesnesine 'popstate' dinleyicisi ekle. Dinleyici bir ok fonksiyonu alsın ve event parametresi taşıyan bir fonksiyon olsun. Eğer event.state.path varsa render(event.state.path) çağrısı yapsın; yoksa render('/') çağrısı yapsın.

Örnek çözümü göster

window.addEventListener('popstate', (event) => {
  if (event.state && event.state.path) {
    render(event.state.path);
  } else {
    render('/');
  }
});

Kendini test et

Bir SPA'da geri veya ileri düğmelerini doğru şekilde yöneten kombinasyon hangisidir?
- Yalnızca pushState kullanmak yeterli
- Yalnızca replaceState kullanmak yeterli
- pushState ile görünümleri değiştir ve popstate ile geri veya ileri'yi yakala
- window.onload ile tüm yönlendirmeyi yap
Cevabı göster

pushState ile görünümleri değiştir ve popstate ile geri veya ileri'yi yakala — Doğru! pushState ile yönlendir, popstate ile geri veya ileri'yi yakala.
History API özetini eşleştir

pushState

yeni kayıt ekler
replaceState

mevcut kaydı değiştirir
popstate

geri veya ileri olayı
router

yönlendirmeyi yönetir

Özet - History API