Routing po stronie klienta w React Router

W tej lekcji rozważymy ważny składnik aplikacji jednostronicowych (SPA) - routing po stronie klienta. Taki routing pozwala nam aktualizować URL w przeglądarce bez dodatkowych żądań dokumentu z serwera.

Uruchom aplikację, którą tworzyliśmy na poprzedniej lekcji. Otwórz panel deweloperski i w nim zakładkę 'Sieć' (Network dla Chrome). Po każdym kliknięciu w nasze linki widzimy za każdym razem żądanie dla document. To znaczy że za każdym razem prosimy serwer o załadowanie nam document.

Skorzystajmy teraz z zalet React Router, aby pozbyć się podobnych żądań. W tym celu otwórzmy root.jsx naszej aplikacji i zamieńmy znacznik a znaczników na komponent Link. Na początek dodajmy jego import:

routes/root.jsximport { Outlet, Link } from 'react-router-dom';

Teraz zamieńmy znaczniki a z atrybutem href. Zamiast kawałka kodu:

routes/root.jsx<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Będziemy teraz mieć następujący kod:

routes/root.jsx<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Ponownie otwieramy zakładkę 'Sieć' w panelu deweloperskim, w pasku adresu ustawiamy ścieżkę główną i odświeżamy stronę. Teraz klikamy w linki i widzimy, że document był przez nas żądany tylko raz przy początkowym ładowaniu i przy kolejnych kliknięciach żądania do serwera już nie ma.