webf-routing-setup
Nawigacja natywna zamiast SPA – każda trasa to osobny ekran z przejściami platformy
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do konfiguracji hybrydowej nawigacji w WebF, gdzie każda trasa renderuje się na osobnym ekranie Flutter z natywnymi przejściami. Zamiast tradycyjnego routingu SPA (react-router-dom, vue-router), WebF używa stosu ekranów podobnie jak aplikacje mobilne. Przydatny przy budowaniu aplikacji wieloekranowych, gdy standardowe biblioteki routingu nie działają prawidłowo, lub gdy chcesz wykorzystać natywne animacje przejść platformy zamiast CSS-owych.
Jak używać
Zainstaluj skill webf-routing-setup w swoim projekcie WebF. Upewnij się, że masz już skonfigurowane narzędzia WebF (Vite, npm) i framework (React, Vue lub Svelte).
Zamiast importować routing z react-router-dom lub vue-router, użyj WebFRouter z pakietu @openwebf/react-router. Zaimportuj komponenty Routes, Route i WebFRouter potrzebne do konfiguracji nawigacji.
Zdefiniuj swoje trasy jako osobne komponenty, pamiętając że każda trasa będzie renderowana na oddzielnym ekranie Flutter, a nie jako sekcja jednej strony. Każdy komponent trasy powinien być samodzielny.
Skonfiguruj WebFRouter w głównym komponencie aplikacji, opakowując Routes i Route'y. To zapewni prawidłową obsługę natywnych przejść między ekranami oraz działanie przycisku wstecz na urządzeniach mobilnych.
Przetestuj nawigację między ekranami, sprawdzając czy przejścia używają natywnych animacji platformy (iOS lub Android) zamiast CSS-owych efektów. Upewnij się że przycisk sprzętu do powrotu działa prawidłowo.
Wdróż aplikację na Vercel, Netlify lub inną usługę wspieraną przez WebF, korzystając z tych samych narzędzi i procesów co w tradycyjnym web developmencie.