epic-routing
Przewodnik po routingu w React Router z automatycznym generowaniem tras dla Epic Stack
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill nauczy Cię, jak budować trasy i strony w aplikacjach Epic Stack. Dowiesz się, jak konfigurować zagnieżdżone layouty, tworzyć trasy zasobów bez interfejsu użytkownika, pracować z parametrami URL i implementować loadery oraz akcje. Skupia się na prostych, przejrzystych strukturach routingu — bez zbędnego skomplikowania.
Jak używać
Zapoznaj się z konwencją plików Epic Stack: trasy umieszczaj w katalogu app/routes/, gdzie nazwa pliku określa ścieżkę URL (np. app/routes/users/$username.tsx tworzy trasę /users/:username).
Utwórz nową trasę, dodając plik TypeScript w odpowiednim miejscu w app/routes/. Zacznij od najprostszej struktury — unikaj zagnieżdżonych tras, jeśli nie masz konkretnego powodu, aby ich używać.
Zdefiniuj funkcję loader w pliku trasy, aby pobierać dane z serwera. Funkcja loader otrzymuje parametry URL i zwraca dane, które będą dostępne w komponencie.
Eksportuj domyślny komponent React, który wyświetla dane z loadera. Komponent otrzymuje loaderData jako prop i renderuje interfejs użytkownika.
Jeśli potrzebujesz obsługi formularzy lub mutacji danych, dodaj funkcję action do tej samej trasy. Action obsługuje żądania POST, PUT i DELETE.
Implementuj zagnieżdżone layouty tylko wtedy, gdy rzeczywiście potrzebujesz wspólnego interfejsu dla grupy tras — na przykład gdy masz podstrony użytkownika (notatki, ustawienia) z wspólnym nagłówkiem.