SPA yönlendirme temelleri

JavaScript kursu · İleri seviye · Ders 82/100

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

SPA yönlendirme temelleri