SESIUNEA 32

Routing and CSS Modules

 Rutare clasica

Rutarea presupune managementul rutelor, a URL-urilor existente

in site-ul sau aplicatia noastra.

In rutarea clasica, cea făcută de noi pana la React se realiza cu

ajutorul tag-ului a si a atributului href. Cu ajutorul tag-ului a, pur și
simplu afisam alt fisier de HTML.
 React Router

Cand vorbim despre Single Page Applications (SPA) lucrurile stau

puțin diferit. Nu avem mai multe pagini HTML, ci una singura, iar
conținutul este se schimba din JavaScript.

Folosind abordarea clasica, problema ar fi ca URL-ul s-ar schimba,

fortand reincarcarea paginii.
 React Router

Pentru a rezolva aceasta problema, exista un router dedicat pentru

react, sub forma de pachet NPM. Acest Pachet se numeste React
Router.

Atentie! Exista doua versiuni de react router, una din ele fiind
pentru aplicații mobile. In cazul nostru, trebuie sa instalam
versiunea pentru web, si anume react-router-dom.
 React Router - Componente

Componentele principale ale lui React router se împart in

următoarele 3 categorii:
● Router - Componenta de baza, cea care impacheteaza
întreaga aplicație, iar in cazul nostru acesta este
BrowserRouter.
● Componente - Atunci cand avem ruta /users, trebuie sa
afisam pagina Users. Acest Lucru se realizeaza cu ajutorul
componentei Route. Este important sa ne asigurăm ca nu
afisam mai multe pagini simultan, iar acest lucru îl facem cu
ajutorul componentei Routes.
● Link-uri - Avem nevoie de link-uri pentru a schimba pagina,
iar componenta Link ne ajuta sa facem asta.
 props.children

Știm ca putem trimite informații către o componenta folosind

props.

Cum procedam in caz ca dormit sa extragem conținutul

componentei?
Q&A
Vrei sa știi mai multe?

● React Router
● React Router - Documentatie
● History API
● CSS Modules