SPA yönlendirme temelleri

History API ile sayfa yenilenmeden çalışan basit bir istemci tarafı yönlendirmeyi öğrenirsin.

SPA yönlendirme

Bir tek sayfa uygulaması (SPA), sayfayı yeniden yüklemeden görünüm değiştiren uygulamadır. History API bunun temelidir: bağlantı tıklamasını yakala, pushState ile URL'i güncelle ve görünümü JavaScript ile değiştir.

link.addEventListener('click', (event) => {
  event.preventDefault();
  history.pushState({}, '', link.href);
  render(link.href);
});

Geri veya ileri düğmelerini de desteklemek için popstate dinleyicisi eklersin; o da render'ı çağırır.

Bağlantı tıklamasını yakala

Bir bağlantının varsayılan davranışı sayfayı yeniden yüklemektir. SPA'larda bunu event.preventDefault() ile engellersin, ardından pushState ile URL'i günceller ve görünümü kendin çizersin.

link.addEventListener('click', (event) => {
  event.preventDefault();
  const path = link.getAttribute('href');
  history.pushState({ path }, '', path);
  render(path);
});

Böylece her tıklama yeni bir geçmiş kaydı ekler ve geri düğmesi doğal biçimde çalışır.

Uygulama navigate fonksiyonu yaz

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

Örnek çözümü göster

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

Kendini test et

History API ile SPA yönlendirmenin avantajı nedir?
- Sayfa yeniden yüklenmeden görünüm değişir ve geri veya ileri çalışır
- Sunucudan her seferinde tam HTML indirilir
- Tarayıcı geçmişi temizlenir
- URL her zaman aynı kalır
Cevabı göster

Sayfa yeniden yüklenmeden görünüm değişir ve geri veya ileri çalışır — Doğru! SPA, History API ile yeniden yüklemeden yönlendirme yapar.

Tıklamada yeniden yüklemeyi engelle

link.addEventListener('click', (event) => {
  ____;
  history.pushState({}, '', link.href);
});

Cevabı göster

link.addEventListener('click', (event) => {
  event.preventDefault();
  history.pushState({}, '', link.href);
});

SPA yönlendirme adımlarını eşleştir

click

pushState çağrılır
pushState

URL'i günceller
popstate

geri veya ileri yakalanır
view swap

içerik değiştirilir

Sıradaki ders: Özet - History API

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler