Gotowe do skopiowania przykłady React Router 7: konfiguracja w każdym trybie, zagnieżdżone layouty, parametry, loadery i akcje, chronione trasy, strony 404, leniwe trasy i migracja z v6.
React Router 7 jest dostarczany jako jeden pakiet, react-router. Opakuj aplikację w BrowserRouter, jeśli potrzebujesz prostego routingu, albo zbuduj trasy przez createBrowserRouter i RouterProvider, aby korzystać z loaderów, akcji i granic błędów. Zagnieżdżaj trasy podrzędne pod layoutem renderującym Outlet, odczytuj segmenty ścieżki przez useParams, a parametry zapytania przez useSearchParams.
Najczęściej używane API
Każdy przykład poniżej jest napisany dla React Router 7 i importuje z react-router. Małe demo na górze działa na żywo, więc możesz klikać po zagnieżdżonych trasach i parametrach; korzysta z wersji routera używanej przez tę stronę, która jest na nim oznaczona.
Nie. W v7 wszystko jest eksportowane z react-router. react-router-dom nadal się instaluje i ponownie eksportuje to samo API, aby ułatwić aktualizację, ale nowe projekty potrzebują tylko react-router.
Tryb danych to biblioteka: tablicę tras budujesz samodzielnie przez createBrowserRouter. Tryb frameworka dodaje wtyczkę Vite, która czyta app/routes.ts, dzieli kod na trasy, generuje typy i może renderować na serwerze.
Dodaj trasę z path "*" jako ostatnie dziecko trasy głównej. Pasuje do każdego adresu URL, którego nie dopasowało nic innego. Na hostingu statycznym skonfiguruj też serwer tak, aby dla nieznanych ścieżek zwracał index.html, żeby router mógł ją wyświetlić.
Nie, parametry są zawsze ciągami znaków albo undefined, gdy segment jest opcjonalny i go brak. Konwertuj je przez Number() i obsłuż przypadek, gdy wynik nie jest poprawną liczbą.
W większości tak. Najpierw włącz w v6 wszystkie sześć flag przyszłości v7 i popraw ostrzeżenia, a potem zaktualizuj. Oficjalny przewodnik mówi, że poza zmianą nazwy pakietu nie ma potem żadnych zmian łamiących zgodność.
Trzy sposoby używania React Router 7
W v7 jeden pakiet obsługuje aplikacje webowe. react-router-dom istnieje już tylko jako ponowny eksport dla starszych importów.
Trasy to zwykła tablica, co odblokowuje loadery, akcje, interfejs oczekiwania i errorElement. Wszystko jest importowane z react-router.
Najmniejsza konfiguracja i najbliższa kodowi z v6. Nie ma loaderów ani akcji; dane pobieraj wewnątrz komponentów.
Wtyczka Vite z @react-router/dev czyta ten plik, dzieli kod na trasy i generuje typy do ./+types/ dla każdego modułu trasy.
Każdy plik trasy eksportuje swój loader i domyślny komponent. Wygenerowane typy Route nadają params i loaderData prawdziwe typy.
Rodzic renderuje wspólny interfejs raz; <Outlet /> wskazuje miejsce, w którym pojawia się pasujące dziecko. Trasa bez ścieżki, jak ta poniżej, jest trasą layoutu.
Segment zaczynający się od dwukropka staje się parametrem. Parametry są zawsze ciągami znaków, więc liczby konwertuj samodzielnie.
Działa jak useState, ale przechowuje wartość w ciągu zapytania, więc filtry przetrwają odświeżenie i można je udostępnić jako link.
Loader uruchamia się przed wyrenderowaniem trasy. Wysłanie <Form method="post"> wywołuje akcję, a po jej zakończeniu router ponownie uruchamia loadery na stronie. Zwracaj zwykłe obiekty; json() i defer() są w v7 przestarzałe.
Sprawdź sesję w loaderze rodzica i przekieruj, zanim wyrenderuje się jakiekolwiek dziecko. Przekaż oryginalną ścieżkę, aby po zalogowaniu odesłać użytkownika z powrotem.
Bez loaderów komponent opakowujący sprawdza uwierzytelnienie i renderuje <Navigate> zamiast strony.
Ścieżka * łapie każdy adres URL, którego nie dopasowało nic innego. errorElement (lub ErrorBoundary jako komponent) renderuje się, gdy loader, akcja lub renderowanie rzuci błąd; useRouteError mówi, co zostało rzucone.
lazy ładuje kod trasy przy pierwszej wizycie. Zwróć właściwości trasy, które chcesz uzupełnić, takie jak Component i loader.
Wyrenderuj <ScrollRestoration /> raz w głównym layoucie routera danych. Przewija na górę na nowych stronach i przywraca poprzednią pozycję przy cofaniu i przechodzeniu dalej.
Gdy w v6 włączysz wszystkie flagi przyszłości, przejście na v7 nie powinno wymagać żadnych innych zmian w kodzie. Wdrażaj każdą flagę osobno, aby łatwo było namierzyć problem. Wersja 8 również jest już dostępna; jej aktualizacja działa tak samo, z nowym zestawem flag v8_, które włączasz jeszcze na wersji 7.
Przejście z v6 na v7
Router działający na stronie z react-router-dom 6.30 (wersja używana przez tę stronę, nie v7). Ma layout /shop z listą produktów, strony szczegółów /shop/:productId, parametr wyszukiwania ?sort i trasę 404 dla wszystkiego. Kod tras jest taki sam w v7.
Demo
Strona główna
Sklep
Niedziałający link
URL:
Layout sklepu
Sortowanie (parametr wyszukiwania)
Nazwa
Cena
Brak produktu o nazwie "{id}".
useParams() zwrócił productId =
Wróć do listy
Demo na żywo: zagnieżdżone trasy i parametry
Strona główna. Otwórz sklep.
404: dopasowała się trasa dla wszystkich adresów.
Zacznij za darmo · Bez karty kredytowej