O aplicație pentru o singură pagină (SPA) este un site web sau o aplicație web care rescrie dinamic o pagină web existentă cu informații noi de pe serverul web.
Într-o aplicație React, componentele preiau conținutul site-ului și îl redau într-un singur fișier HTML din proiectul tău.
React Router vă ajută să navigați la componenta dorită și să o redați în fișierul HTML. Pentru a-l folosi, trebuie să știți cum să configurați și să integrați React Router cu aplicația dvs. React.
Cum se instalează React Router
Pentru a instala React Router în proiectul dvs. React folosind npm, managerul de pachete JavaScript, rulați următoarea comandă în directorul de proiect:
npm i react-router-dom
Alternativ, puteți descărca pachetul folosind Yarn, un manager de pachete care vă permite să instalați pachete de bibliotecă offline.
Pentru a instala React Router folosind Yarn, rulați această comandă:
yarn add react-router-dom@6
Configurarea routerului React
Pentru a configura React Router și a-l face disponibil în aplicația dvs., importați BrowserRouter din reacţionează-router-dom în interiorul tău index.js fișier, apoi împachetați componenta aplicației în fișierul BrowserRouter element:
import Reacţiona din'reacţiona';
import ReactDOM din„react-dom/client”;
import App din„./App”;
import { BrowserRouter } din„react-router-dom”;const root = ReactDOM.createRoot( document.getElementById('rădăcină') );
root.render(
</BrowserRouter>
);
Încheierea componentei aplicației în BrowserRouter element oferă întregii aplicații acces complet la abilitățile routerului.
Rutarea către alte componente
După configurarea routerului în aplicația dvs., ar trebui să continuați și să creați componentele aplicației, să le rutați și să le redați. Următorul cod importă și creează componente numite „Acasă”, „Despre” și „Blog”. De asemenea, importă Traseu și Trasee elemente din reacţionează-router-dom.
Vă veți defini traseele în interiorul App componenta:
import { Rute, Rută } din„react-router-dom”;
import Acasă din'./Acasă';
import Despre din'./Despre';
import Blog din„./Blog”;funcţieApp() {
întoarcere (
'/' element={ } />
'/despre' element={ } />
'/blog' element={ }/>
</Routes>
)
}
exportMod implicit Aplicație;
The App componenta este componenta principală care redă tot codul pe care l-ați scris în celelalte componente.
The Trasee elementul este elementul părinte care include rutele individuale pe care le creați în componenta aplicației. The Traseu elementul creează o singură rută. Este nevoie de două atribute de recuzită: a cale si un element.
The cale Atributul definește calea URL a componentei dorite. Prima Rută din blocul de cod de mai sus folosește o bară oblică inversă (/) ca cale. Aceasta este o rută specială pe care React o va reda mai întâi, deci Acasă componenta se redă atunci când rulați aplicația. Nu confunda acest sistem cu implementarea redării condiționate în React Components. Poți să dai asta cale atribuiți orice nume doriți.
The element atributul definește componenta pe care Traseu va reda.
The legătură componenta este o componentă React Router utilizată pentru a naviga pe diferite rute. Aceste componente accesează diferitele rute pe care le-ați creat.
De exemplu:
import { Link } din„react-router-dom”;funcţieAcasă() {
întoarcere (
'/despre'>Despre pagina</Link>
'/blog'>Pagina de blog</Link>Aceasta este Pagina de pornire
</div>
)
}
exportMod implicit Acasă;
The legătură componenta este aproape identică cu eticheta de ancorare HTML, folosește doar un atribut numit „to” în loc de „href”. The legătură componenta navighează la Rută cu numele de cale corespunzătoare drept atribut și redă componenta Rutei.
Rutarea imbricată și cum să o implementați
React Router acceptă rutare imbricată, permițându-vă să includeți mai multe rute într-o singură rută. Acesta este utilizat în principal atunci când există o oarecare similitudine între căile URL ale rutelor.
Odată ce ați creat componentele pe care doriți să le rutați, veți dezvolta rute individuale pentru fiecare dintre ele în aplicația componentă.
De exemplu:
import { Rute, Rută } din„react-router-dom”;
import Articole din'./Articole';
import Articol nou din„./NewArticle”;
import Articolul Unu din„./ArticleOne”;funcţieApp() {
întoarcere ('/articol' element={ }/> „/articol/nou” element={ }/> '/articolul 1' element={ }/>
</Routes>
)
}
exportMod implicit Aplicație;
Blocul de cod de mai sus importă și direcționează componentele create Articole, Articol nou, și Articolul Unu. Există unele asemănări în căile URL între cele trei rute.
The Articol nou Numele căii rutei începe la fel ca Articole Numele traseului, cu o bară oblică inversă adăugată (/) și cuvântul „nou”, adică (/nou). Singura diferență între numele de căi ale Articole Traseul și Articolul Unu Traseul este bara oblică (/1) de la sfârșitul Articolul Unu calea componentei.
Puteți cuibărește cele trei Rute în loc să le lăsați în starea lor actuală.
Ca astfel:
import { Rute, Rută } din„react-router-dom”;
import Articole din'./Articole';
import Articol nou din„./NewArticle”;
import Articolul Unu din„./ArticleOne”;funcţieApp() {
întoarcere ('/articol'>
}/>„/articol/nou” element={ }/> '/articolul 1' element={ }/>
</Route>
</Routes>
)
}
exportMod implicit Aplicație;
Ați împachetat cele trei rute individuale într-o singură Traseu element. Rețineți că părintele Traseu elementul are doar cale atribut și nr element atribut care definește componenta de redat. The index atribut la primul copil Traseu element specifică că aceasta Traseu se redă atunci când navigați la calea URL a părintelui Traseu.
Pentru a vă face codul mai bun și mai ușor de întreținut, ar trebui să vă definiți rutele într-o componentă și să o importați în aplicația componentă pentru utilizare.
De exemplu:
import { Rute, Rută } din„react-router-dom”;
import Articole din'./Articole';
import Articol nou din„./NewArticle”;
import Articolul Unu din„./ArticleOne”;funcţieArticolulRute() {
întoarcere (
}/>„/articol/nou” element={ }/> '/articolul 1' element={ }/>
</Routes>
)
}
exportMod implicit ArticolRoute;
Componenta din blocul de cod de mai sus conține rutele imbricate care erau anterior în componenta aplicației. După crearea componentei, ar trebui să o importați în aplicația componentă și direcționați-o folosind un singur Traseu element.
De exemplu:
import { Rute, Rută } din„react-router-dom”;
import ArticolulRute din„./ArticleRoutes”;funcţieApp() {
întoarcere ('/articol/*' element={ }>
</Routes>
)
}
exportMod implicit Aplicație;
In final Traseu componenta, simbolurile backslash și asterisc adăugate la sfârșitul căii rutei asigură că calea corespunde oricărui nume de cale care începe cu (/articol).
Există mai multe pentru React Router
Acum ar trebui să fiți familiarizați cu elementele de bază ale modului de a construi aplicații cu o singură pagină în React.js, folosind React Router.
Există multe mai multe funcții disponibile în biblioteca React Router care fac experiența dezvoltatorului mai dinamică atunci când construiesc aplicații web.
