JS History API Pushstate SPA

Ringkasan

History API mengubah URL tanpa reload penuh — fondasi routing SPA.

Konsep Dasar

• history.pushState(state, "", url) — tambah entri history + ubah URL.
• history.replaceState() — ubah entri saat ini tanpa tambah.
• popstate event saat user navigasi back/forward.
• Gunakan <a> + intercept untuk aksesibilitas (bukan hanya JS murni).

Cara Kerja / Struktur

js

document.querySelectorAll("a[data-link]").forEach(a =>
  a.addEventListener("click", e => {
    e.preventDefault();
    history.pushState({}, "", a.href);
    render();
  }));
window.addEventListener("popstate", render);

Catatan Implementasi

• Selalu preventDefault + pushState, lalu render view.
• Tangani popstate agar back button bekerja.

Kesalahan Umum

• Ubah URL via location.href (reload penuh) di SPA.
• Lupa render saat popstate → tombol back kosong.

Glosarium

• SPA: single-page app, navigasi tanpa reload.
• popstate: event saat history berubah via back/forward.

Referensi

• Fetch API