Nowoczesny React: Nawigowanie pomiędzy widokami - pages

0:00Jeśli spojrzymy sobie krytycznie na to, w jaki sposób działa nasz routing,

0:04zauważymy, że jest jeden problem. Otóż to.

0:08Menu cały czas się zamyka, dlatego, że gubimy stan.

0:11Widać to również na przeglądarce, ponieważ odświeżamy ją cały czas, czyli w momencie,

0:16gdy ją odświeżymy, jak gdyby gubimy cały stan.

0:19Cała nasza aplikacja jak gdyby zaczyna działać od początku.

0:23Standardowo takie działanie by nam nie przeszkadzało.

0:26Natomiast jeżeli chcemy mieć client side application, tak gdzie działa tzw.

0:30architektura single page application, czyli spa, no to to

0:34działanie jest niepożądane.

0:36Nie chcielibyśmy, żeby właśnie tak to działało.

0:38Powodem jest natywne działanie linków.

0:41Otóż link stara się działać tak, jak został do tego przystosowany.

0:45Czyli jeżeli mamy href to odprowadza nas na zupełnie inną stronę.

0:49Ta strona po prostu może być jakimś katalogiem podkatalogiem na serwerze HTTP

0:55i wtedy zaserwowana jest kolejna porcja HTML.

0:58A jeśli cokolwiek zostanie na serwerze odnalezione.

1:01Tutaj nie wychodzimy zupełnie poza ramy naszej przeglądarki, czyli nie wychodzimy

1:07do serwera i nie chcemy przeszukiwać serwera, nie chcemy wysyłać zapytań,

1:11raczej zostajemy po stronie klienta i do tego posłuży nam specjalny

1:15komponent, który nazywa się Navlink.

1:18Navlink dostarczony jest przez React router Dom.

1:21Wtedy musimy go zmienić po prostu na tu.

1:24I to jest nasz required attribute. Zobacz.

1:26Gdybyśmy zapomnieli to zrobić, dostanę tutaj informację zwrotną.

1:31Don't have required attribute to.

1:33I tylko taka zmiana wystarczy nam do tego poprawiona właśnie w naszym navbaritem,

1:39żebyśmy mogli sobie teraz wykorzystać routing i nie refreshować strony.

1:46Czyli można sobie wyobrazić, że Navlink to taki komponent, który wykona

1:51za nas zadanie PreventDefault.

1:54Czyli gdybyśmy natywny link chcieli ograniczyć tylko do tej właśnie własności,

2:00gdzie chcielibyśmy korzystać z tego naszego clientside routingu.

2:03Musielibyśmy użyć Event PreventDefault w handler do onClick dla naszego ancora,

2:10który był tutaj wcześniej na Link2.

2:13To jest jeden z elementów, który musimy użyć, jeśli chcemy, żeby pozostać właśnie

2:17w tej architekturze single player application.

2:19Gdybyśmy sobie wyobrazili formularz, no to mamy kolejna rzecz, która natywnie

2:25działająca w przeglądarce nie może zostać pozostawiona tak samo w OnSubmit.

2:29Mielibyśmy event PreventDefault.

2:31Tutaj nowy link posłuży nam do tego, żeby jeszcze oznaczyć klasę is active.

2:36Czyli nowy link ma jeszcze specjalną cechę, że className.

2:39W React routerze ten react router domClassName może być podany jako funkcja.

2:45Czyli gdybyśmy sobie tutaj wrzucili funkcję i zrestrukturyzowali is active.

2:50Dostajemy informację zwrotną, czy ścieżka, na której teraz jesteśmy jest aktywna i

2:55możemy tą informację wykorzystać w bulmie.

2:58Gdybyśmy do każdego elementu dodali is active, to wszystkie byłyby podświetlone.

3:02Natomiast chcemy tylko dodać do tego, który faktycznie jest aktywny.

3:06Wiemy już, że classnames nam w tym pomoże i możemy sobie tutaj

3:11navbaritem dodać tak jak było.

3:14Natomiast w obiekcie z polem is active jest active to nasze property,

3:19a tutaj to jest active.

3:21Będzie oznaczało, która ścieżka jest w danym momencie aktywna w tym układzie.

3:25Zauważ, że dostajemy bardzo fajną stronkę, gdzie podświetlana jest strona, na

3:30której aktualnie się znajdujemy.

3:32Możemy tutaj dla takiego jeszcze efektu wizualnego dorzucić sobie, żeby to nasze

3:38menu miało delikatny odstęp margin bottom na przykład 2.

3:43I wtedy mamy już bardzo fajnie funkcjonujące menu razem z naszą stroną i

3:49podświetlaniem właśnie aktywnej ścieżki jesteśmy na Exchange.

3:53Zobacz Exchange is active.

3:55Jesteśmy na People, czyli mamy tą podstawową ścieżkę i ona jest aktywna,

3:59więc zostanie podświetlona tutaj w naszym menu.