Tworzenie podstron z React Router (v5) – Kurs React – cz. 8

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-dom

Stworzenie 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 start

przedstawia się tak jak poniżej.

Wyrenderowana aplikacja z react router

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.

Został wyrenderowany domyślny komponent Route (NotFound).

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.

Wyświetlenie parametru URL w komponencie Product

W przypadku jeśli nie ma żadnych parametrów pojawia się informacja.

Treść dla strony Product bez parametrów URL.

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?