Tema
/
Interneto svetainių kliento dalies kūrimas JS
📖 Teorija

Vieno puslapio maršrutai rankomis

Visa Cosmos sąsaja jau yra, bet ji „gyvena" viename URL — negali dalintis nuoroda į konkretų vaizdą, o naršyklės „Atgal" mygtukas nieko nedaro. Sutvarkysim tai maršrutizatoriumi rankomis — be jokio karkaso.

Kadangi tai vieno puslapio programa (SPA), tikros navigacijos tarp HTML failų nėra. Vietoj to naudosim URL hash (dalį po #):

#/            → pradžia
#/gallery     → galerija
#/collection  → kolekcija
#/apod/2026-07-11 → viena nuotrauka (dalinama, žymima)

Maršrutizatorius — tik lentelė „vardas → funkcija" ir vienas įvykis:

onRoute('gallery', renderGallery);
onRoute('detail', renderDetail);
window.addEventListener('hashchange', handleRoute);

Genialumas — hashchange įvykyje. Jis suveikia ir paspaudus nuorodą su #, ir paspaudus naršyklės „Atgal"/„Pirmyn". Todėl „Atgal" mygtukas veikia nemokamai — nieko papildomai nedarom. Tai — svarbiausia įžvalga.

Trys galimybės, kurias gausim:

  • Gilios nuorodos. #/apod/2026-07-11 atidarytas iš naujo (be jokių duomenų) turi pats atsisiųsti tą vieną nuotrauką.
  • URL sinchronizuota paieška. #/gallery?q=moon — paieška tampa dalinama nuoroda ir išgyvena perkrovimą.
  • Veikiantis „Atgal". Naršai galeriją → detales → atgal, ir naršyklė tave grąžina.

Ir du spąstai: kaip nepridaryti šimto istorijos įrašų kas paieškos raidę (replaceState), ir kodėl niekada neskaidyti ?q=moon&days=30 ranka (URLSearchParams).