React: Czym jest Switch

0:00Cześć! W tej lekcji zaczniemy tworzyć komponent nawigacji, dzięki któremu będziemy

0:04mogli swobodnie przemieszczać się między podstronami, które stworzyliśmy w poprzedniej lekcji, ale

0:08zanim do przejdziemy, to jeszcze mamy jeden niedokończony wątek, bo obiecałem,

0:12że powiem, co możemy robić zamiast tego exact, bo w tym momencie exact

0:17faktycznie działa, ale tylko na ścieżkę dla strony głównej, a w momencie gdyby mielibyśmy na

0:21przykład, coś takiego, że notatka ma jeszcze jakieś id,

0:25dwukropek przed nazwą w naszym... dwukropek

0:33przed nazwą w naszej ścieżce oznacza, że to jest jakaś zmienna. To

0:37id, tak naprawdę może wyglądać na przykład tak, czyli faktycznie jest

0:41jakimś id i pokażę ci, co to robi. Jeśli

0:45przejdziemy sobie do notes, to oczywiście mamy notes, a jeśli przejdziemy

0:49sobie do notes i podamy faktycznie jakieś id, może być to jakiś numer identyfikacyjny,

0:54na przykład naszej notatki, to wtedy notes wyrenderuje nam się dwa razy, bo

0:58renderuje się stąd stąd. A wynika to faktu, że obie te ścieżki

1:02są do siebie bardzo podobne i tak naprawdę ta ścieżka zawiera w sobie część

1:07tej ścieżki, przez co obydwie się nam renderują i tak

1:11jak wspominałem, to jest zamierzone - tak wymyślono właśnie React Router, żeby czasami

1:15na jednej ścieżce pojawiało kilka komponentów, ale

1:19jeśli chcemy temu zapobiec. Jeśli chcemy, żeby na jednej ścieżce wyświetlał

1:24tylko jeden komponent, to mamy do tego jeszcze jeden komponent z naszego React Router DOM,

1:29które możemy zaimportować. Nazywa się Switch. Już

1:35sama nazwa podpowiada nam, że jeśli użyjemy go w tym miejscu, to

1:40faktycznie te nasze komponenty będą się switch'ować. Zauważ,

1:44że jeśli przejdziemy sobie teraz do notes z id,

1:50to nie wyświetla nam się notes dwa razy, tak jak wcześniej. Jeśli

1:54wrzucimy do naszego notes, to mamy też notes. Jeśli

1:58wrócimy do strony głównej, mamy TwittersView i Articles

2:04też powinno działać. Tak i właśnie w ten sposób działa Switch,

2:08że wszystko, co znajduje się wewnątrz tego switcha, jest wymienne -

2:13to znaczy, że jeśli renderowany jest jeden komponent, to drugi

2:17nawet jeśli spełnia ten warunek, tej ścieżki, to nie zostanie wyrenderowany. Jeśli

2:22wyrzucilibyśmy tego Route'a poza naszego Switcha, w tym miejscu. Przeszli

2:26byśmy do naszych notatek, to

2:32zauważ, że on znowu się pojawił. Ten drugi Notoes. I w ten

2:36sposób możemy kontrolować, które ścieżki są na Switch, które powinny

2:40wyświetlać tylko jako pojedyncze komponenty, a które mogą

2:45być jakimś dodatkowym komponentem i tę właściwość wykorzystamy przy tworzeniu modala,

2:49ale tym później. Wrócimy zatem do naszego

2:53porządku, żeby wszystko było jak należy i możemy teraz spokojnie

2:57zacząć konstruować nasz komponent nawigacji. Stwórzmy więc w

3:01naszym folderze components nowy folder, nazwiemy go

3:05Navigation, a w nim nowy plik Navigation.js. Zaimportujemy oczywiście React'a. Stworzymy

3:18sobie zatem prosty komponent, w którym będzie lista, w tej

3:22liście będziemy mieć trzy linki i kolejne te linki będą prowadzić

3:27do strony głównej, articles oraz

3:32notes. Okej, teraz

3:37musimy to wyeksportować. Zaimportujemy

3:44sobie to do naszego widoku hurtowego i wrzucimy

3:49nad nasze Hello World. Okej,

3:54teraz jeśli wszystko poszło dobrze, to nasza nawigacja powinna działać i faktycznie,

4:01jesteśmy przenoszeni na odpowiednie ścieżki. Tylko

4:05to, co możesz zauważyć, to że podczas zmieniania ścieżki, nasza

4:10strona jest przeładowywana. Trwa to ułamek sekundy, ale na chwilę nam miga.

4:14I to jest właśnie ten problem, o którym mówiłem w pierwszej

4:18części, gdzie mówiłem o React Routerze. Nasza strona wysyła zapytanie do

4:22serwera, a my chcemy przechwycić to zapytanie i powiedzieć - hola, hola, my

4:26nie chcemy nic od naszego serwera. My to wszystko mamy w plikach JS, już gotowe.

4:30Możemy to po prostu zaserwować. Nie chcemy doładowywać żadnego

4:34pliku HTML, dlatego nie musimy przeładowywać naszej strony. I w

4:39tym nie potrzebujemy naszych linków, w postaci a, w

4:43postaci anchor tag'ów. Potrzebujemy czegoś, co właśnie pozwoli

4:47nam przechwycić to zapytanie do serwera i to, co musimy zaimportować

4:52nazywa się link. Oczywiście zaimportujemy to z React Router DOM.

4:56Przed nami jeszcze jedno

5:01ulepszenie, w związku tym linkiem, ale nie będę teraz zdradzał, o co chodzi. Na

5:05razie, po prostu, zamienimy te wszystkie a na linka. I  tutaj

5:18zamiast href, musimy zmienić props'a na to. I spójrz. Teraz,

5:24kiedy będę klikał w linki, nasza strona nie będzie się już przeładowywać,

5:28czyli będziemy mieć takie pełne Single Page Application. Takie o

5:33jakim marzymy. Pięknie. Zero

5:37przeładowań. Wygląda to po prostu świetnie. Nie,

5:42może trochę przesadzam, to są tylko proste linki, nawet nie ostylowane, ale

5:46jesteśmy na dobrej drodze, żeby zrobić coś fajnego. Stylowanie naszej

5:50nawigacji, dodawaniem logo, dodawaniem button'a new item, zajmiemy się już

5:54kolejnej lekcji.