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:

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

Vom avea acum următorul cod:

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.