Rutarea pe partea de client în React Router

În această lecție vom analiza o componentă importantă a aplicațiilor single-page (SPA) - rutarea pe partea de client. Această rutare ne permite să actualizăm URL-ul în browser fără cereri suplimentare pentru document de la server.

Porniți aplicația pe care am creat-o în lecția precedentă. Deschideți panoul de dezvoltator și în el fila 'Rețea' (Network pentru Chrome). După fiecare click pe linkurile noastre vedem de fiecare dată o cerere pentru document. Adică de fiecare dată cerem serverului să ne încarce documentul.

Să profităm acum de avantajele React Router, pentru a scăpa de astfel de cereri. Pentru aceasta, vom deschide root.jsx aplicației noastre și vom înlocui tagul a din marcaj cu componenta Link. Pentru început, să adăugăm importul ei:

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

Acum înlocuim tagurile a cu atributul href. În loc de fragmentul de cod:

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

Vom avea acum următorul cod:

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

Deschidem din nou fila 'Rețea' în panoul de dezvoltator, în bara de adresă setăm calea rădăcină și reîmprospătăm pagina. Acum facem click pe linkuri și vedem că documentul a fost solicitat doar o dată la încărcarea inițială iar la click-urile ulterioare nu mai există cereri către server.