Nowoczesny React: Dodanie tablicy routingu

0:00Nasza aplikacja wygląda coraz lepiej, mamy coraz to więcej funkcjonalności,

0:04wygląda to fajnie, natomiast jeszcze nie mamy rozwiązanego tematu routingu.

0:09Czyli zobacz, gdybyśmy chcieli sobie przejść do strony Exchange, ta

0:13strona po prostu nie działa.

0:14Nie mamy tutaj nic co obsługuje tą stronę.

0:17Z jednej strony Exchange działa jako ścieżka.

0:20Zauważ dlatego, że mamy tutaj konfigurację pod SPA z automatu

0:23skonfigurowaną przez Wita.

0:25Natomiast z drugiej strony jak gdyby nic się nie dzieje na Osom React.

0:31Gdybyśmy chcieli sobie zobaczyć to źródło i rozwiązać nasz problem, czyli tak

0:35zwany problem routingu React routing.

0:37Będziemy mieli trzy biblioteki do wyboru.

0:40Jest tam taki router router.

0:42No i tutaj mamy React router.

0:44My użyjemy React routera.

0:47Tutaj zobacz jest w takiej wersji szóstej i to co potrzebujemy to

0:51jest dokładnie client side.

0:53Routing To jest dokładnie to.

0:55Potrzebujemy właśnie czegoś takiego.

0:57Potrzebujemy zainstalować biblioteki React router dom i wtedy utworzyć sobie tablicę

1:02routingu, a później podczepić ją właśnie w ten sposób do naszej aplikacji.

1:08Spróbujmy sobie to zrobić, czyli zaimportujmy sobie.

1:11Create browser router właśnie z React. Router dom.

1:14Pierwsza rzecz, którą musimy zrobić w naszej aplikacji to oczywiście

1:18zainstalowanie React router dom.

1:19Użyjemy do tego komendy npm i React router dom.

1:23Teraz, jeżeli React router dom jest zainstalowany.

1:26Spróbujmy sobie tutaj zrobić osobne miejsce na routing.

1:29Mamy coś takiego jak routing i tutaj niech będzie nasz router.

1:35Zauważ tutaj, że będziemy potrzebowali router jako JSX file, dlatego, że tutaj

1:39będziemy stosować zapisy związane z komponentami, czyli będziemy stosować JSX.

1:46Tutaj zróbmy sobie ten create browser router jako const router, ponieważ chcemy

1:51żeby tutaj pozostała cała konfiguracja.

1:53Do tego Create browser router dodajemy sobie export tak żebyśmy mieli export

1:58router i zaimportowali sobie to właśnie w JS.

2:01I tutaj w naszym przypadku stosujemy taką konfigurację.

2:05Czyli mamy kolejne, kolejne w tej tablicy.

2:08Zauważ obiekty będą konfigurowały kolejne ścieżki, czyli tutaj na tej

2:13zasadzie możemy sobie dodać path.

2:16Na tej głównej ścieżce chcemy osadzić nasz komponent page.

2:20To będzie dokładnie people page.

2:22Zobaczmy jak będzie to działać.

2:24Jeżeli teraz wrócimy do naszej aplikacji, chcielibyśmy sobie People Page osadzić.

2:28Musimy ten router wpiąć sobie tutaj do main JS.

2:31Zauważ, że tutaj zostało to zrobione w ten sposób router provider router i

2:36będziemy mieli tutaj to router provider.

2:41Importujemy sobie ten router provider z React router dom.

2:44JSX już nie potrzebujemy.

2:47I tutaj w router wrzucamy sobie router jako tablicę routingu.

2:52Zobacz, że jest to routing router JSX.

2:54I teraz widzimy, że exchange nie do końca działa, ale jeżeli wejdziemy na główną

3:00stronę dostajemy list of people.

3:02Nie do końca tego się spodziewaliśmy, dlatego, że router provider teraz osadza.

3:06Zauważ ten element na górze ścieżki, co oznacza, że zrezygnowaliśmy z

3:12abkomponentu, który mamy tutaj.

3:15Całkowicie go omijamy, a to w nim mamy header, notification i pozostałe rzeczy.

3:20Z kolei gdybyśmy tutaj zrobili sobie AB.

3:22Jest to dobry pomysł, ale wtedy dostając list of people, jeżeli będziemy

3:27zmieniali te ścieżki, nic nam to nie da.

3:29To znaczy cały czas będziemy widzieć List of People, dlatego że to List of People

3:33jest tutaj zahartowane z perspektywy złożenia tych komponentów, to

3:38te komponenty zależą od siebie.

3:40Zamiast tego chcielibyśmy, żeby to router osadzał stronę w zależności od

3:44tego, na jakiej stronie jesteśmy.

3:47Więc tutaj potrzebujemy komponentu, który nazywa się Outlet i ten outlet jako takie

3:52właśnie gniazdko będzie nam określał, w którym konkretnie

3:57miejscu ma osadzić widok.

3:59Jeśli chodzi o ten outlet na razie nie wyświetla nic, dlatego, że na tej głównej

4:03ścieżce nie ma informacji o tym, jaki element ma się tutaj znaleźć.

4:08Możemy sobie dopisać to w ten sposób, że będziemy mieli na komponencie AB jakieś

4:14dodatkowe elementy, czyli Children.

4:16I to one zostaną ustawione właśnie w outlecie, pod warunkiem, że dostarczymy

4:21tutaj odpowiednią konfigurację.

4:23Czyli na takiej ścieżce, która jest pusta, będziemy chcieli osadzić

4:27element people page.

4:28W ten sposób wracamy do tego samego układu z List of Page.

4:32Ale teraz, gdybyśmy chcieli sobie dopisać Exchange, jesteśmy w stanie to zrobić.

4:37To znaczy tutaj znowu na głównej ścieżce chcielibyśmy appeal, ale jeżeli dalsza

4:43część ścieżki to Exchange, zobacz to tutaj.

4:46Będziemy chcieli sobie nie listow page zamontować.

4:49Moglibyśmy tutaj sobie czysto teoretycznie zrobić właśnie nasz

4:54page layout razem z tytułem Exchange.

4:58Musimy to zamknąć.

4:59I teraz zobacz dostajemy stronę Exchange.

5:02Jeśli jesteśmy na Exchange i stronę People.

5:04Jeśli wracamy tutaj List of People, powinniśmy teraz dodać osobny komponent

5:09właśnie jako exchange page, tak żebyśmy szli właśnie według tej konwencji, że

5:14tutaj będziemy mieli główne strony, główne widoki naszej aplikacji.

5:19Przenieśmy sobie w takim wypadku ten page layout.

5:21Przeniesiemy go do osobnej strony.

5:24Tutaj utwórzmy sobie stronę nazwaną Exchange Page.

5:29I ten JSX będzie nam eksportował nowy komponent Exchange Page.

5:34Razem z tym kodem, który mamy tutaj.

5:37W takim układzie mamy People page.

5:39No i na routingu Exchange będziemy mieli Exchange page.

5:43I tutaj zwracamy ten kod, który przygotowaliśmy.

5:47Exchange of Gifts, załóżmy.

5:50To tutaj moglibyśmy przygotować dalszą część strony, czyli tutaj.

5:54Exchange of Gifts.

5:55Mamy tą stronę Exchange.

5:57A tutaj jak przeniesiemy się na People.

5:59Mamy list of people.

6:01Więc tak jak widzisz ten page layout znowu zostaje wykorzystywany per Każda strona,

6:06którą tutaj mamy i to pages będzie obsługiwane właśnie w głównej mierze przez

6:10router, bo to router będzie osadzał strony.

6:13Nie potrzebujemy tego importu z Page Layout.

6:15Zauważ, że potrzebujemy tutaj, aby JSX jako nasz główny element, a później te

6:21komponenty, które mamy w Children będą osadzane właśnie poprzez Outlet.

6:26Dlatego ten outlet jest tutaj nam potrzebny i to on będzie determinował,

6:30jaki komponent ma się osadzić na jakiej ścieżce.

6:33To co widzisz tutaj w RouterJS mamy główną ścieżkę i na głównej ścieżce, czyli na

6:39każdej ścieżce tak naprawdę będzie osadzony komponent app, a później dalej

6:43będzie sprawdzana ścieżka czy albo jest to puste.

6:48Więc generalnie jeśli jest puste to mamy PeoplePage i to zostanie

6:51ustawione w outlecie.

6:52Natomiast jeżeli będziemy mieli exchange, czyli ten segment ścieżki, to

6:56będzie dodatkowo tutaj Exchange.

6:58To wtedy mamy osadzony komponent Exchange Page i w ten sposób już zaczyna nam to

7:04bardzo fajnie funkcjonować, dlatego że za każdym razem, jeżeli sobie klikniemy w

7:08People, będziemy w Top People, jeśli będzie Exchange, to Exchange.

7:12Więc działa nasze menu i co więcej to jest obsługiwane cały czas

7:18lokalnie, czyli client side.

7:20Cały czas mamy właśnie Create browser router, więc to jest client side routing.