Vienas lapas lietojumprogramma (Single Page Application — SPA) ir vietne vai tīmekļa lietojumprogramma, kas dinamiski pārraksta esošu tīmekļa lapu ar jaunu informāciju no tīmekļa servera.

React lietojumprogrammā komponenti izgūst vietnes saturu un atveido to vienā HTML failā jūsu projektā.

React Router palīdz jums virzīties uz jūsu izvēlēto komponentu un atveido to HTML failā. Lai to izmantotu, jums jāzina, kā iestatīt un integrēt React Router ar savu React lietojumprogrammu.

Kā instalēt React maršrutētāju

Lai instalētu React Router savā React projektā, izmantojot npm, JavaScript pakotņu pārvaldnieks, projekta direktorijā palaidiet šādu komandu:

npm i react-router-dom

Varat arī lejupielādēt pakotni, izmantojot Yarn — pakotņu pārvaldnieku, kas ļauj instalēt bibliotēkas pakotnes bezsaistē.

Lai instalētu React Router, izmantojot Yarn, palaidiet šo komandu:

dzija pievieno react-router-dom@6

React maršrutētāja iestatīšana

Lai konfigurētu React Router un padarītu to pieejamu savā lietojumprogrammā, importējiet BrowserRouter no reaģēt-maršrutētājs-dom tavā iekšienē index.js failu, pēc tam ietiniet lietotnes komponentu BrowserRouter elements:

imports Reaģēt no'reaģēt';
imports ReactDOM no'react-dom/client'; 
imports App no'./Lietotne';
imports { BrowserRouter } no"react-router-dom";
konst root = ReactDOM.createRoot( dokumentu.getElementById('sakne') );
root.render(


 </BrowserRouter>
);

Lietotnes komponenta iesaiņošana BrowserRouter elements nodrošina visai lietotnei pilnīgu piekļuvi maršrutētāja iespējām.

Maršrutēšana uz citām sastāvdaļām

Pēc maršrutētāja iestatīšanas lietojumprogrammā jums vajadzētu turpināt un izveidot lietotnes komponentus, maršrutēt tos un renderēt. Šis kods importē un izveido komponentus ar nosaukumu "Sākums", "Par" un "Emuārs". Tas arī importē Maršruts un Maršruti elementi no reaģēt-maršrutētājs-dom.

Jūs definēsit savus maršrutus App komponents:

imports { Maršruti, maršruts } no"react-router-dom";
imports Mājas no'./Mājas';
imports Par no'./Par';
imports Emuārs no'./Blogs';
funkcijuApp() {
atgriezties (

'/' elements={ } />
'/par' elements={ } />
'/blog' elements={ }/>
 </Routes>
 )
}
eksportētnoklusējuma Lietotne;

The App komponents ir galvenais komponents, kas atveido visu kodu, ko esat ierakstījis citos komponentos.

The Maršruti elements ir vecākelements, kas aptver atsevišķus maršrutus, ko izveidojat savā lietotnes komponentā. The Maršruts elements izveido vienu maršrutu. Tam nepieciešami divi rekvizītu atribūti: a ceļš un an elements.

The ceļš atribūts definē paredzētā komponenta URL ceļu. Pirmajā maršrutā iepriekš minētajā koda blokā kā ceļš tiek izmantota slīpsvītra (/). Šis ir īpašs maršruts, kuru React atveidos pirmais, tāpēc Mājas komponents tiek renderēts, kad palaižat lietojumprogrammu. Nejauciet šo sistēmu ar ieviešot nosacījumu renderēšanu jūsu React komponentos. Jūs varat dot šo ceļš piešķiriet jebkuru vārdu, kas jums patīk.

The elements atribūts definē komponentu, kas Maršruts atveidos.

The saite komponents ir React Router komponents, ko izmanto, lai pārvietotos dažādos maršrutos. Šie komponenti piekļūst dažādiem jūsu izveidotajiem maršrutiem.

Piemēram:

imports { Saite } no"react-router-dom";
funkcijuMājas() {
atgriezties (



'/par'>Par lapu</Link>
'/blog'>Emuāra lapa</Link>
Šī ir sākumlapa
 </div>
 )
}
eksportētnoklusējuma Mājas;

The saite komponents ir gandrīz identisks HTML enkura tagam, tas tikai izmanto atribūtu ar nosaukumu "to", nevis "href". The saite komponents dodas uz maršrutu ar atbilstošo ceļa nosaukumu kā tā atribūtu un atveido maršruta komponentu.

Ligzdota maršrutēšana un tās ieviešana

React Router atbalsta ligzdotu maršrutēšanu, ļaujot apvienot vairākus maršrutus vienā maršrutā. To galvenokārt izmanto, ja maršrutu URL ceļi ir līdzīgi.

Kad esat izveidojis komponentus, kurus vēlaties maršrutēt, jūs katram no tiem izstrādāsit atsevišķus maršrutus lietotne komponents.

Piemēram:

imports { Maršruti, maršruts } no"react-router-dom"; 
imports Raksti no'./Raksti';
imports Jauns raksts no'./Jauns raksts';
imports Pirmais pants no'./ArticleOne';
funkcijuApp() {
atgriezties (

'/raksts' elements={ }/>
'/raksts/jauns' elements={ }/>
'/article/1' elements={ }/>
 </Routes>
 )
}
eksportētnoklusējuma Lietotne;

Virs esošais koda bloks importē un maršrutē izveidotos komponentus Raksti, Jauns raksts, un Pirmais pants. URL ceļos starp trim maršrutiem ir dažas līdzības.

The Jauns raksts Maršruta ceļa nosaukums sākas tāpat kā Raksti Maršruta ceļa nosaukums ar pievienotu slīpsvītru (/) un vārdu "jauns", t.i. (/jauns). Vienīgā atšķirība starp ceļu nosaukumiem Raksti Maršruts un Pirmais pants Maršruts ir slīpsvītra (/1) burta beigās Pirmais pants komponenta ceļa nosaukums.

Varat ievietot trīs maršrutus, nevis atstāt tos pašreizējā stāvoklī.

Tā kā:

imports { Maršruti, maršruts } no"react-router-dom";
imports Raksti no'./Raksti';
imports Jauns raksts no'./Jauns raksts';
imports Pirmais pants no'./ArticleOne';
funkcijuApp() {
atgriezties (

'/raksts'>
 }/>
'/raksts/jauns' elements={ }/>
'/article/1' elements={ }/>
 </Route>
 </Routes>
 )
}
eksportētnoklusējuma Lietotne;

Jūs esat ietvēris trīs atsevišķus maršrutus vienā Maršruts elements. Ņemiet vērā, ka vecāks Maršruts elementam ir tikai ceļš atribūts un nr elements atribūts, kas definē atveidojamo komponentu. The rādītājs atribūts pirmajā bērnā Maršruts elements norāda, ka šis Maršruts tiek renderēts, kad pārejat uz vecāka URL ceļu Maršruts.

Lai padarītu savu kodu labāku un apkopjamāku, jums ir jādefinē maršruti komponentā un jāimportē tas lietotne sastāvdaļa lietošanai.

Piemēram:

imports { Maršruti, maršruts } no"react-router-dom";
imports Raksti no'./Raksti';
imports Jauns raksts no'./Jauns raksts';
imports Pirmais pants no'./ArticleOne';
funkcijuRaksts Maršruti() {
atgriezties (

 }/>
'/raksts/jauns' elements={ }/>
'/article/1' elements={ }/>
 </Routes>
 )
}
eksportētnoklusējuma pantsMaršruti;

Iepriekš esošā koda bloka komponents satur ligzdotos maršrutus, kas iepriekš bija lietotnes komponentā. Pēc komponenta izveides jums tas jāimportē mapē lietotne komponentu un virziet to, izmantojot vienu Maršruts elements.

Piemēram:

imports { Maršruti, maršruts } no"react-router-dom";
imports Raksts Maršruti no'./ArticleRoutes';
funkcijuApp() {
atgriezties (

'/raksts/*' elements={ }>
 </Routes>
 )
}
eksportētnoklusējuma Lietotne;

Finālā Maršruts komponents, pievienotie slīpsvītras un zvaigznītes simboli maršruta ceļa nosaukuma beigās nodrošina, ka ceļa nosaukums atbilst jebkuram ceļa nosaukumam, kas sākas ar (/raksts).

Maršrutētājam ir jāreaģē vairāk

Tagad jums vajadzētu iepazīties ar vienas lapas lietojumprogrammu izveides pamatprincipiem programmā React.js, izmantojot React Router.

React Router bibliotēkā ir pieejamas daudzas citas funkcijas, kas padara izstrādātāju pieredzi dinamiskāku, veidojot tīmekļa lietojumprogrammas.