Nowoczesny React: Dynamiczne parametry routingu, obsługa 404

0:00Często jest tak, że w naszej aplikacji spotykamy potrzebę tak zwanych

0:04dynamicznych parametrów do naszego routingu.

0:06Wyobraźmy sobie następujący przykład.

0:09Chciałbym po kliknięciu w imię danej osoby poczytać trochę więcej na jej temat.

0:13Wiem, że teraz jeżeli kliknę tutaj to selectujemy osoby i to jest ta

0:17funkcjonalność jak najbardziej jest nam potrzebna, ale chciałbym po kliknięciu

0:20w imię dowiedzieć się czegoś więcej.

0:23I teraz możemy sobie wyobrazić, że będzie to mnie odprowadzało do zupełnie innej

0:26strony, gdzie mogę coś poczytać na temat Ewy, Marka czy Krysi?

0:31Zobaczmy sobie w panel bloku.

0:32Musimy sobie dodać coś, co pozwoli nas przenieść jak gdyby do tej strony,

0:37która by dotyczyła tych informacji.

0:39Użyjemy do tego linka.

0:41Tutaj akurat nie ma w linku, dlatego, że nasz link posłużyłby nam do tego, żeby

0:47wiedzieć, która ścieżka jest aktywna, więc linki idealnie nadają się do tego, żeby

0:51być właśnie jakimś tam elementem menu.

0:54Natomiast tutaj chcemy sobie złożyć ścieżkę i zaraz to zrobimy.

0:59Na przykład może być to person.

1:01I tutaj dorzucam sobie zobacz, że składam to normalnie ze stringa.

1:06Dlatego użyłem tutaj znaków basica i to jest po prostu czyściuteńki JavaScriptcik,

1:10czyli tak zwany template string.

1:12Z JavaScriptu dorzucam sobie po prostu name jako kolejny segment

1:17do tego co mamy tutaj.

1:18Mamy person name i tutaj name wrzucam sobie i ten link powinien zacząć działać.

1:24Zobacz, że mamy tutaj person. Ewa.

1:26Co więcej router zauważ działa nam poprawnie pod tym względem, że ja

1:30mogę wrócić do poprzedniego widoku.

1:32Czyli tutaj jak gdyby ta historia jest w przeglądarce zawarta.

1:36Więc za każdym razem, jeżeli ja klikam w link, to tak zwany pushstate, czyli

1:41wrzucenie kolejnego stanu routera jest w przeglądarce przechowywane.

1:45Co za tym idzie to jest bardzo dobry user experience, dlatego że user może też sobie

1:50nawigować przeglądarką, jeżeli coś pójdzie nie tak.

1:53No i tutaj oczywiście mamy błędy typu 404 not found i sugestie,

1:57żebyśmy użyli error boundary.

1:59Zamiast tego polecam Ci zrobić troszeczkę inną rzecz.

2:02Można oczywiście użyć error mądry.

2:04Natomiast my użyjemy do tego przechwytywanie wszystkich ścieżek,

2:08czyli błąd 404 obsłużymy sobie jako path.

2:11I tutaj możemy podać wildcard, czyli każda inna ścieżka, każda

2:16nierozpoznana ścieżka da nam element.

2:19I teraz dla przykładu wrzućmy sobie po prostu taki page layout, gdzie będziemy

2:24mieli po prostu informację, że coś nie zostało odnalezione.

2:28I na razie sprowadzimy się tylko do tego, czyli mamy not found 404.

2:33I zauważ, że teraz, jeżeli klikniemy sobie w dowolną z tych ścieżek, to

2:38dostajemy taki właśnie błąd.

2:40No ale to nie jest rozwiązanie naszego zadania.

2:43Chcielibyśmy, żeby po person i tutaj imię tej osoby dostać więcej

2:47informacji na jej temat.

2:49No i zobacz, że dynamicznym segmentem jest w tym przypadku name.

2:53Name może być dowolne, dlatego, że zależy od naszych danych, zależy od name,

2:58które jest przesłane do bloku.

3:00To z kolei jest zależne od tego filter people.

3:03A filter ID people jest zależny oczywiście od naszej tablicy people, czyli tego, z

3:08czego wyszliśmy tutaj na samym początku, jeśli chodzi o nasze dane do aplikacji.

3:14W takim układzie możemy to sobie rozwiązać w następujący sposób.

3:18Dodajmy sobie ścieżkę, która będzie obsługiwała właśnie coś takiego jak person

3:23i tutaj będziemy mieli dynamiczny segment person name.

3:28W takim układzie możemy tutaj page layout title dorzucić sobie coś takiego jak

3:34Person Info i zobaczyć czy działa to poprawnie.

3:37Mamy już Person info i zobacz, że jak gdyby ten dynamiczny segment może

3:42reprezentować dowolną wartość.

3:44Zarówno John jak i Not Existence będzie poprawne dlatego, że nie jest to

3:51walidowane pod kątem jakichkolwiek danych.

3:53To jest po prostu string, który możemy sobie właśnie złapać na tym page layoucie.

3:59Spróbujmy to zrobić w całości poprawnie, czyli dodajmy page taką

4:04jak Person info jako JSX.

4:10Przerzucimy sobie ten page layout jako personinfo.

4:13A tutaj zwróćmy element PersonInfopage.

4:26Chcielibyśmy mieć możliwość załadowania informacji na temat danej osoby.

4:31Można sobie wyobrazić, że tutaj moglibyśmy zapytać np.

4:34Backend.

4:35W takim wypadku tutaj zróbmy sobie jakieś notification z info isLife.

4:43Zasymulujmy sobie tutaj jakiś preloader + dodatkowo chcemy odczytać

4:48właśnie ten dynamiczny segment.

4:50Chcielibyśmy ten dynamiczny segment odczytać sobie tutaj, żeby móc w momencie

4:54załadowania tego komponentu zacząć ładować dane.

4:58W tym wypadku użyjemy Hooka UseParams, który jest właśnie dedykowany

5:04dla takiego przypadku.

5:05Wiemy, że parametry, które dostaniemy to będzie Personname.

5:09Mogę Ci na razie pokazać wszystkie parametry, ale zobaczysz, że ta nazwa,

5:13którą ustaliliśmy sobie tutaj jest nieprzypadkowa.

5:16To znaczy będziemy w PersonInfoPage mogli użyć tej nazwy pod Params.

5:21Spróbujmy sobie to Params wrzucić tutaj poniżej jako JSON StringParams.

5:28Pamiętaj, że nie możemy wrzucać obiektu i zobacz, że dostajemy tutaj PersonName.

5:32To w jaki sposób jest nazwany ten segment ma znaczenie, bo jeżeli nazwiemy go sobie

5:37tylko name, to name dostaniemy tutaj.

5:39Jeżeli to będzie pinname to będziemy dostawać tutaj pi name jako parametr.

5:44I tutaj oczywiście wrzucimy personName.

5:48Wrócimy do tego jak to było na początku. Więc mamy person.

5:51Ewa i to Ewa.

5:52Jesteśmy w stanie tutaj sobie wyłuskać.

5:55W takim wypadku możemy tutaj loading data about i wrzucić sobie tutaj

6:00zrestrukturyzowane personname.

6:03I teraz możesz sobie wyobrazić, co będziemy robić dalej.

6:06Gdybyśmy chcieli faktycznie ładować dane.

6:08Nie mamy co prawda żadnego źródła, z którego możemy to zrobić, ale teraz

6:12będziemy mieli tutaj loading data from backend.

6:18I oczywiście jest to zależne od dependency personname.

6:21Czyli zobacz, że za każdym razem, jeśli personname się zmienia, tutaj

6:25będziemy mieli loading data.

6:27Jeśli chcemy, żeby preloader nam się usunął, czyli po jakimś czasie chcemy

6:31sobie załadować te dane, moglibyśmy sobie zrobić loading jako use state.

6:38I tutaj odświeżyli byśmy po Settimeout'cie.

6:42Jest loading.

6:44Załóżmy, że zaczyna się od wartości true i tutaj odczekujemy półtorej sekundy, a

6:50tutaj robimy sobie renderowanie warunkowe.

6:54Jeśli jest loading, to wtedy pokazuj nam preloader i będziemy mieli loading data

7:00about eva i po półtorej sekundy to znika.

7:02Możemy to sobie oczywiście zwiększyć, na przykład do trzech sekund.

7:05Natomiast tutaj się zatrzymam z tym przykładem.

7:08Moglibyśmy sobie załadować coś z backendu i widzisz, że to działałoby poprawnie.

7:13Byłoby zależne od personname, czyli tego parametru, który tutaj mamy.

7:16Jeśli ten parametr się zmieni, jeśli byśmy wrócili i kliknęli jakąś inną osobę,

7:22to zobacz, że działa to poprawnie.

7:24I w ten sposób właśnie mamy dynamiczne parametry.

7:28Czyli z jednej strony nazywamy ten parametr, a z drugiej strony odbieramy w

7:32danym komponencie, który chciałby z niego skorzystać.

7:35Jako UserParams z React router dom.

7:38To juz parametr pozwala nam odebrać parametry, które sobie założyliśmy.

7:42Oczywiście ich może być kilka.

7:43Zauważ, że tam możemy sobie dodać kolejny, kolejny segment, gdybyśmy potrzebowali.

7:49Wtedy oczywiście ta ścieżka przestanie działać.

7:52Dlatego, że nie spełniamy tego warunku.

7:54Musielibyśmy tutaj dodać jeszcze jedną rzecz, żeby spełnić ten warunek, czyli

7:59żeby ta ścieżka miała dwa dynamiczne segmenty na przykład.

8:02Więc ta ilość dynamicznych segmentów jest dowolna.

8:05Każdy z nich powinien po prostu nazywać się inaczej, natomiast możemy sobie

8:09ich zdefiniować tutaj dowolną ilość.