Smerovanie na strane klienta v React Router

V tejto lekcii sa pozrieme na dôležitú zložku jednostránových (SPA) aplikácií - smerovanie na strane klienta. Takéto smerovanie nám umožňuje aktualizovať URL v prehliadači bez dodatočných požiadaviek na dokument zo servera.

Spustite aplikáciu, ktorú sme vytvorili v predchádzajúcej lekcii. Otvorte panel vývojára a v ňom kartu 'Sieť' (Network pre Chrome). Po každom kliknutí na naše odkazy vidíme každý raz požiadavku na document. To znamená, že zakaždým žiadame server, aby nám načítal document.

Poďme teraz využiť výhody React Router, aby sme sa zbavili podobných požiadaviek. Preto otvorme root.jsx našej aplikácie a nahraďme značku a rozloženia komponentom Link. Na začiatok pridajme jeho import:

import { Outlet, Link } from 'react-router-dom';

Teraz nahraďme značky a s atribútom href. Namiesto kúska kódu:

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Teraz budeme mať nasledujúci kód:

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Znovu otvoríme kartu 'Sieť' na paneli vývojára, v adresnom riadku nastavíme koreňovú cestu a obnovíme stránku. Teraz klikáme na odkazy a vidíme, že document sa u nás požadoval len raz pri počiatočnom načítaní a pri následných kliknutiach už nie je žiaden request na server.

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Použitím materiálov z lekcie implementujte do nej smerovanie na strane klienta, prepracovaním vašich odkazov, ako je popísané v lekcii.