Klijentsko rutiranje u React Routeru

U ovoj lekciji ćemo razmotriti važnu komponentu jednostraničnih (SPA) aplikacija - klijentsko rutiranje. Ovakvo rutiranje nam omogućava ažuriranje URL-a u pretraživaču bez dodatnih zahteva za dokumentom sa servera.

Pokrenite aplikaciju koju smo kreirali u prethodnoj lekciji. Otvorite Developer Tools i u njima karticu 'Network' (Network za Chrome). Nakon svakog klika na naše linkove vidimo svaki put zahtev za document. To jeste, svaki put tražimo od servera da nam učita dokument.

Hajde sada da iskoristimo prednosti React Router-a, da bismo se oslobodili ovakvih zahteva. Za to otvorimo root.jsx naše aplikacije i zamenimo tag a razmete komponentom Link. Za početak dodajmo njegov import:

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

Sada zamenimo tagove a sa atributom href. Umesto dela koda:

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

Sada ćemo imati sledeći kod:

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

Ponovo otvorimo karticu 'Network' u Developer Tools-u, u adresnoj traci postavimo osnovnu putanju i osvežimo stranicu. Sada klikamo na linkove i vidimo da se document zahtevao samo jednom pri početnom učitavanju i pri narednim klikovima zahtev ka serveru više ne postoji.

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći materijale lekcije, implementirajte u njoj klijentsko rutiranje, prepravivši vaše linkove, kao što je opisano u lekciji.