3.5 KiB
Implementacija astro:client-router (poznatog kao View Transitions) pretvorit će tvoju aplikaciju u SPA (Single Page Application). To znači da se prilikom navigacije ne osvježava cijela stranica, već se samo mijenja sadržaj, što drastično ubrzava rad tvog ERP sustava i zadržava stanje komponenti.
Slijedi korake za potpunu implementaciju:
1. Konfiguracija u Layout.astro
Najvažniji korak je dodavanje <ClientRouter /> komponente u tvoj osnovni layout. Ovo će automatski "zakačiti" sve linkove u aplikaciji.
---
// src/layouts/Layout.astro
import { ClientRouter } from 'astro:transitions';
---
<html>
<head>
<ClientRouter /> </head>
<body>
<slot />
</body>
</html>
2. Upravljanje stanjem (State persistence)
Kada koristiš client-router, tvoji NanoStores će ostati sačuvani u memoriji između stranica (što je odlično!). Međutim, ako želiš da se određeni dijelovi (npr. naslovi stranica ili podaci koji se moraju resetirati) osvježe, koristi astro:page-load event.
U bilo kojoj klijentskoj komponenti (.jsx), možeš reagirati na promjenu rute:
// U nekoj komponenti ili globalnoj skripti
document.addEventListener('astro:page-load', () => {
console.log('Nova stranica učitana, resetiram UI...');
// Ovdje možeš pokrenuti logiku za resetiranje UI-a ako je potrebno
});
3. "Persisting" (Očuvanje) elemenata
Ako želiš da se neki elementi ne smiju ponovno renderirati (npr. tvoj ToastContainer ili navigacijski izbornik), dodaj atribut transition:persist.
<ToastContainer client:only="preact" transition:persist />
4. Kako postupati s a tagovima
Sada kada imaš client-router, ne moraš više ništa mijenjati u svojim <a> tagovima. Astro će automatski presresti klikove i izvesti "View Transition".
- Ako želiš isključiti router za neki specifičan link (npr. vanjski link), koristi:
<a href="/login" data-astro-reload>Osvježi cijelu stranicu</a>
5. Rješavanje problema s localStorage i useEffect
Budući da se stranica sada ne osvježava, useEffect se neće uvijek okinuti kao kod "hard" reloads. Ako imaš logiku koja se mora izvršiti pri svakom dolasku na stranicu (npr. provjera tokena), umjesto useEffect(() => {...}, []) koristi:
import { useEffect } from 'preact/hooks';
// Umjesto standardnog useEffect-a, koristi event koji se okida kod svake navigacije
useEffect(() => {
const handleRouteChange = () => {
// Tvoja logika (npr. provjera auth tokena)
};
document.addEventListener('astro:page-load', handleRouteChange);
return () => document.removeEventListener('astro:page-load', handleRouteChange);
}, []);
Zašto je ovo "game changer" za tvoj ERP:
- Brzina: Navigacija između
RadniNaloziiDashboardpostaje trenutačna. - State Preservation: Tvoji NanoStoreovi ostaju živi. Ako serviser filtrira nalog, navigira na drugu stranicu i vrati se, filtar će biti sačuvan.
- Animacije: Možeš lako dodati
transition:animate="fade"na glavni sadržaj stranice za "profesionalni" osjećaj aplikacije.
Napomena: Nakon što dodaš <ClientRouter /> u Layout.astro, provjeri konzolu. Ako dobiješ greške vezane uz "Hydration Mismatch", to znači da smo se vratili na onaj stari problem – tada samo postavi transition:persist na te komponente ili koristi client:only.
Jesi li implementirao <ClientRouter /> u Layout.astro? Ako jesi, osjećaš li već brzinu navigacije?