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-11atidarytas 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).