Nowoczesny React: Child routing

0:00Rozważmy sobie pewien problem.

0:01Co by było, gdybyśmy chcieli po kliknięciu zamiast otwierać nowej strony,

0:06zamiast przeładowywać wszystkiego?

0:08Chcielibyśmy, żeby to Personinfo pokazywało się tutaj z prawej strony,

0:11czyli po kliknięciu dostaje z prawej strony personinfo.

0:15Rozwiązanie tego problemu to tak zwany child routing.

0:18To znaczy musimy sobie wyobrazić, że w tym układzie musimy przejść do PeoplePage i

0:23tam dorobić sobie pewną funkcjonalność.

0:25To znaczy chciałbym mieć teraz widok podzielony.

0:28Fajnie by było, gdyby był responsywny.

0:30Jeśli chodzi o bulmę, to mamy coś takiego jak ClassName columns i jeżeli to jest

0:36desktop to byśmy chcieli to podzielić kolumnowo, natomiast jeśli nie, to

0:42może to być kolumna pod kolumną.

0:43Tak to sobie zróbmy.

0:45To znaczy tutaj gdybyśmy mieli dwie kolumny, to ta pierwsza kolumna będzie po

0:49stronie lewej, ta druga po stronie prawej, więc jeśli weźmiemy sobie, przeniesiemy

0:54ten nasz widok, a tutaj będziemy mieli jakiś inny,

0:59to w przypadku mobilnym będzie jedno pod drugim, a w przypadku, gdy rozciągniemy

1:04swoją przeglądarkę, no to już jest ciekawie, dlatego, że tutaj

1:07będziemy sobie coś przeładowywać.

1:08Czyli mamy już graficznie zrobiony placeholder na to, żeby

1:12tutaj coś zmieniać.

1:14No i tutaj musi być kolejny outlet.

1:17Ten outlet spowoduje, że w środku tego people page mamy kolejny element,

1:24który spodziewamy się osadzić.

1:26I spróbujmy teraz troszeczkę przepisać nasz routing.

1:29To znaczy teraz było tak, że wchodzimy na Person i Person name.

1:33Spróbujmy sobie to zrobić troszeczkę inaczej na ścieżce People

1:37i tutaj będzie Person name.

1:39Dostaniemy People Page faktycznie, ale Person name będzie obsługiwany teraz

1:45przez Children, więc wyobraź sobie children zawsze jako

1:49coś, co będzie osadzone na outlecie tego elementu, który masz tutaj.

1:53Zobacz, że to samo obowiązuje przy app przy app.

1:56W outlecie tego app mamy wszystko to, co jest w children, a w People Page

2:00dorzuciliśmy sobie nowy outlet, czyli tutaj mamy ten outlet i to wszystko, co

2:04jest w Children będzie osadzone właśnie w tym miejscu, w People Page, w tym outlecie

2:08będziemy sobie osadzać ten element i ten element, który chcemy tutaj sobie zrobić,

2:13to będzie po prostu personname i to personInfopage, czyli zobacz, zostawiamy

2:19ten dynamiczny parametr, a tutaj zostawiamy sobie people.

2:22I teraz zmieńmy sobie troszeczkę linki.

2:25Jeżeli byśmy zostali przy tych czyli to person personname, no

2:28to mamy osobną stronę.

2:29Natomiast jeżeli zmienimy sobie to na people i tutaj będziemy dawać name, to

2:35zobacz, że to powinno nam się otworzyć tutaj.

2:38Być może chciałbyś zrobić sobie dedykowany komponent, który nazywałby się People

2:42Detail albo Person detail, gdzie nie mielibyśmy tego tytułu i

2:46gdzie ładowalibyśmy rzeczy.

2:47Zrobilibyśmy bardzo podobną logikę.

2:49Natomiast bez tego tytułu, który jest tutaj teraz, tak widzimy, że zmienia się

2:54nam tutaj adres, natomiast niewiele się dzieje w Personinfo, wystarczy

2:58tylko sobie poprawić jedną rzecz.

2:59Tam na PersonInfopage zapomnieliśmy o tym, żeby za każdym razem jak personname się

3:04zmienia set loading ustawić na true.

3:07Jeżeli tak będzie no to zobacz, że teraz będziemy mieli loading data about mark.

3:13Teraz jeżeli kliknę Krysia to mamy loading data about Krysia i mamy to personinfo.

3:17Tutaj po prawej stronie możemy sobie obsłużyć jeszcze jeden przypadek w

3:22momencie, w którym nie mamy w ogóle nic załadowane.

3:24Czyli wyobraźmy sobie, że mamy stronę główną, jest List of people i fajnie by

3:28było to rozciągnąć do końca, dlatego że nie mamy co tutaj wyświetlić.

3:32Nie możemy to zrobić za pomocą propsów, które przekazujemy.

3:36Zauważ, że tutaj osadzamy JSX'a i możemy mieć people page, ale

3:40people page z opcją outlet.

3:43Bardzo podobna zasada działania jak w czystym HTMLu.

3:46Jeżeli zrobisz jakiegoś dropsa, a w przypadku HTML'a oczywiście tutaj mówimy o

3:51atrybutach i nie ma on żadnej wartości, to domyślnie jest to wartość true, czyli

3:55outlet będzie miał domyślnie wartość true.

3:57Jeżeli tak to zrobimy, jeżeli tak to zapiszemy.

4:00Natomiast musimy to oczywiście odbierać tutaj i tutaj.

4:03Z kolei domyślna wartość to będzie false.

4:06I teraz, żeby dobrze mnie zrozumieć tutaj na routerjeżeli umieścisz outlet,

4:12to będzie on miał wartość true.

4:14Czyli nie trzeba pisać czegoś takiego.

4:16Nie musimy robić takiego zapisu.

4:18Ten zapis jest równoznaczny z tym jak zapiszemy outlet.

4:21Tutaj z kolei przy People Page chcemy, żeby to outlet domyślnie było na

4:26false, bo chcemy wyświetlać ten outlet.

4:28W takim układzie musimy odwrócić ten warunek.

4:31Czyli jeżeli nie ma not outlet to wtedy chcemy to wyświetlać.

4:36Zobacz, że w tym układzie elegancko widok nam się powiększa.

4:39Natomiast jeżeli klikniemy na coś, to będziemy ładować czy to Ewa czy Mark.

4:46Mamy po prostu odświeżenie tego widoku.

4:48Zobaczmy sobie jeszcze raz pipe'u.

4:50Klikamy i możemy sobie załadować Personinfo.

4:55W tym układzie nasz widok jest gotowy.

4:57I tak wygląda właśnie child routing.

4:59Czyli jest to sytuacja, w którym coś co osadzamy na naszym routingu

5:03będzie miało wewnętrzny outlet.

5:04Więc to co ma podchildren, jeżeli ścieżka będzie się nam zgadzała, zostanie właśnie

5:10wyświetlone tutaj razem z tym komponentem.

5:13Dlatego, że to jest ten komponent główny, który został notabene na

5:16wcześniejszym outlecie osadzony, tak?

5:18Tutaj możemy sobie poprawić jeszcze jeden element, o którym zgłasza

5:22nam slide, czyli People page.

5:25Możemy sobie dodać tutaj propsy.

5:27Teraz w PropTypes będziemy mieli coś takiego jak outlet jako

5:32prop types, bo ten.