Jak tworzyć podstrony za pomocą React Router? W tej części kursu pokazuję jak to zrobić oraz wyjaśniam czym jest React Router i jak działa.
Czym jest React Router?
React Router to biblioteka, która zawiera kolekcję komponentów umożliwiających tworzenie podstron w aplikacji Reactowej (dostępna jest również wersja dla React Native).
Artykuł został stworzony w oparciu o React Router w wersji 5.
Cały wytworzony kod podczas tworzenia artykułu dostępny jest na GitHub – link dostępny jest na dole strony w sekcji Źródła / przydatne linki.
Tworzenie podstron w aplikacji Reactowej – react router dom
Instalacja React Router
Na początek należy zainstalować bibliotekę React Router
npm install react-router-domStworzenie komponentu nawigacji
Zanim powstaną podstrony przydałby się prosty komponent nawigacji.
Komponent Link odpowiada za nawigację do innej podstrony. Należy przekazać props to, w którym będzie adres podstrony. Oczywiście trzeba jeszcze dodać tekst dla linka.
Stworzenie komponentów podstron
W nawigacji zostały zdefiniowane dwie podstrony, zatem teraz należy stworzyć komponenty dla nich. Oba komponenty będą zwracały tylko tekst.
Komponent About.
Komponent Home
Tworzenie podstron z React Router
Pierwszą rzeczą będzie zaimportowanie komponentów z react-router-dom oraz nowo utworzonych powyżej.
import {
BrowserRouter as Router,
Switch,
Route,
} from "react-router-dom";
import Navigation from './components/Navigation/Navigation';
import Home from './components/pages/Home';
import About from './components/pages/About';Komponent App wygląda następująco.
Po uruchomieniu aplikacji
npm startprzedstawia się tak jak poniżej.
BrowserRouter
Komponent Router (BrowserRouter) opakowuje całą aplikację. Wykorzystuje on HTML5 history API do synchronizacji interfejsu aplikacji z adresem URL w przeglądarce.
Switch
Switch odpowiada za renderowanie odpowiedniego komponentu Route. Jeśli podana ścieżka będzie zgadzała się z tą w przeglądarce to ten konkretny komponent zostanie wyrenderowany. To swego rodzaju pętla, w której Switch szuka pierwszego pasującego Route.
W przypadku jeśli Route nie będzie pasował zostanie wyrenderowany jako null.
Route
To najważniejszy komponent w React Router, który wykonuje to co ma przekazane jako dziecko (children), czyli w tym przypadku komponent odpowiedniej podstrony.
Domyślna strona dla nieistniejących adresów – 404 w React Router
Jak w każdej aplikacji czy na stronie internetowej trzeba obsłużyć widok dla nieistniejących adresów URL.
Nowy komponent NotFound
Komponent będzie wyświetlał się dla nieistniejących adresów URL. Zwykły tekst „Not found” powinien wystarczyć 😊.
Dodanie domyślnego Route
Kolejnym krokiem będzie dodanie kolejnego wywołania komponentu Route na końcu. Nie będzie posiadał parametru path. Przypomina to default w pętli switch.
<Route>
<NotFound />
</Route>To nie wszystko… – parametr exact w Route
Mogłoby się wydawać, że to powinno wystarczyć, aby obsłużyć stronę 404. Jednak trzeba jeszcze dodać parametr exact do komponentu Route w przypadku adresu „/”. Dzieje się tak, ponieważ bez tego parametru każdy niepasujący adres URL będzie pasował do „/” (zgadza się początek) np. „/asdf”. Parametr exact oznacza, że adres URL musi być dokładnie taki sam jak w parametrze path.
Efekt wpisania nieprawidłowego adresu w przeglądarce.
Parametry w adresie URL – React Router Query Parameters
Parametry w adresie URL są dodawane po znaku ? (jeśli to pierwszy parametr), a kolejne po znaku &.
Nowy komponent Product
Dla przedstawienia query parameters został stworzony nowy komponent o nazwie Product.
Dodanie adresu product w Switch oraz linków
Należy dodać nowy adres „/product”
<Route path="/product">
<Product />
</Route>oraz linków do nowo utworzonego komponentu wraz z parametrami w adresie URL.
<li>
<Link to="/product?name=awesome-book">Product > Awesome Book</Link>
</li>
<li>
<Link to="/product?name=react-course">Product > React Course</Link>
</li>Jak wyświetlić wartość przekazanego parametru URL w React Router?
Do wyszukiwania parametrów w adresie URL zostanie wykorzystana funkcja URLSearchParams. Jako parametr przyjmuje adres URL, w tym przypadku przekazywany jest aktualny adres URL, a zwracana jest wartość parametru np. name (query.get(„name”)). query zwróci przekazane parametry w postaci: name=value.
function useQuery() {
return new URLSearchParams(useLocation().search);
}Nazwa parametru przekazywana jest jako props do komponentu ProductContent.
<ProductContent name={query.get("name")}/>W środku komponentu ProductContent znajduje się instrukcja warunkowa, która sprawdza czy jest przekazany parametr name i wyświetla odpowiednią treść.
function ProductContent({name}) {
return (
<div>
{name ? (
<p>Query is: <strong>{name}</strong></p>
) : (
<p>No query params</p>
)}
</div>
);
}Rezultat po kliknięciu w nowy link – wyświetla się parametr w treści.
W przypadku jeśli nie ma żadnych parametrów pojawia się informacja.
Więcej przykładów React Router
Na oficjalnej dokumentacji można znaleźć więcej przykładów wykorzystania React Router (również te podstawowe opisane w artykule).
Kilka przykładów:
- podstawowe podstrony
- parametry w URLu
- zagnieżdżanie (np. panel boczny na podstronach)
- autoryzacja (przekierowania)
- strona 404
- galeria
Źródła / przydatne linki
Cały kod z kursu (link do commita) – https://github.com/pbasiak/kurs-react-example-app/tree/93b736517285e521418ecce4aa0fb67f8145db9a
Oficjalna dokumentacja React Router – https://reacttraining.com/react-router/web/guides/quick-start
React Router na GitHub – https://github.com/ReactTraining/react-router
Podsumowanie
W artykule przedstawiłem jak za pomocą React Router stworzyć podstrony w aplikacji Reactowej.
Najważniejsza jest praktyka, więc zachęcam do stworzenia prostej aplikacji, w której będzie kilka prostych stron, strony z parametrami, strona 404.
Podziel się opinią na temat tej części kursu. Czy według Ciebie tworzenie podstron z React Router jest proste?
Dodaj komentarz