Usmerjanje na strani odjemalca v React Router
V tej lekciji bomo obravnavali pomembno sestavino enostranskih (SPA) aplikacij - usmerjanje na strani odjemalca. Takšno usmerjanje nam omogoča posodabljanje URL v brskalniku brez dodatnih zahtev za dokumentom s strežnika.
Zaženite aplikacijo, ki smo jo ustvarili v
prejšnji lekciji. Odprite razvojno orodje in
v njem zavihek 'Omrežje' (Network za Chrome).
Po vsakem kliku na naše povezave
vidimo vsakič zahtevo za document. To pomeni,
da vsakič prosimo strežnik, da nam naloži
document.
Izkoristimo torej prednosti
React Routerja, da se znebimo takih
zahtev. Za to odprimo root.jsx
naše aplikacije in zamenjajmo oznako a
v razmeščanju s komponento Link. Za
začetek dodajmo njen uvoz:
import { Outlet, Link } from 'react-router-dom';
Zdaj zamenjajmo oznake a z atributom
href. Namesto koščka kode:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
Bomo zdaj imeli naslednjo kodo:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
Spet odprimo zavihek 'Omrežje' v
razvojnem orodju, v naslovni vrstici
nastavimo korensko pot in osvežimo
stran. Zdaj kliknemo na povezave
in vidimo, da se je document zahteval
samo enkrat ob začetni nalaganju
in ob nadaljnjih klikih zahteve na
strežnik ni več.
Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva iz lekcije implementirajte v njej usmerjanje na strani odjemalca, prenehavši vaše povezave, kot je opisano v lekciji.
