Single Page Application (SPA) on verkkosivusto tai verkkosovellus, joka kirjoittaa dynaamisesti uudelleen olemassa olevan verkkosivun uusilla tiedoilla verkkopalvelimelta.

React-sovelluksessa komponentit hakevat sivuston sisällön ja hahmontavat sen yhdeksi HTML-tiedostoksi projektissasi.

React Router auttaa sinua navigoimaan valitsemaasi komponenttiin ja näyttää sen HTML-tiedostossa. Käyttääksesi sitä, sinun on tiedettävä, kuinka React Router määritetään ja integroidaan React-sovellukseesi.

Kuinka asentaa React Router

Asenna React Router React-projektiisi käyttämällä npm, JavaScript-pakettien hallinta, suorita seuraava komento projektihakemistossasi:

npm i react-router-dom

Vaihtoehtoisesti voit ladata paketin Yarnilla, paketinhallintaohjelmalla, jonka avulla voit asentaa kirjastopaketteja offline-tilassa.

Asenna React Router Yarnilla suorittamalla tämä komento:

lanka add react-router-dom@6

React-reitittimen määrittäminen

Voit määrittää React Routerin ja tuoda sen saataville sovelluksessasi BrowserRouter alkaen react-router-dom sinun sisälläsi index.js tiedosto ja kääri sitten sovelluskomponentti BrowserRouter elementti:

tuonti Reagoi alkaen'reagoi';
tuonti ReactDOM alkaen'react-dom/client'; 
tuonti Sovellus alkaen'./Sovellus';
tuonti { BrowserRouter } alkaen"react-router-dom";
konst root = ReactDOM.createRoot( asiakirja.getElementById('juuri') );
root.render(


 </BrowserRouter>
);

Sovelluskomponentin kääriminen BrowserRouter elementti antaa koko sovellukselle täyden pääsyn reitittimen ominaisuuksiin.

Reititys muihin komponentteihin

Kun olet määrittänyt reitittimen sovelluksessasi, sinun tulee luoda sovelluskomponentit, reitittää ne ja hahmontaa ne. Seuraava koodi tuo ja luo komponentteja nimeltä "Home", "About" ja "Blog". Se myös tuo maahan Reitti ja Reitit elementtejä react-router-dom.

Määrität reitit sisälläsi Sovellus komponentti:

tuonti { Reitit, reitti } alkaen"react-router-dom";
tuonti Koti alkaen'./Koti';
tuonti Noin alkaen'./Noin';
tuonti Blogi alkaen'./Blogi';
toimintoSovellus() {
palata (

'/' element={ } />
'/noin' element={ } />
'/blogi' element={ }/>
 </Routes>
 )
}
viedäoletuksena Sovellus;

The Sovellus komponentti on pääkomponentti, joka tekee kaiken koodin, jonka olet kirjoittanut muihin komponentteihin.

The Reitit elementti on yläelementti, joka kääri sovelluskomponenttiin luomasi yksittäiset reitit. The Reitti elementti luo yhden reitin. Se vaatii kaksi propattribuuttia: a polku ja an elementti.

The polku attribuutti määrittää aiotun komponentin URL-polun. Yllä olevan koodilohkon ensimmäinen reitti käyttää kenoviivaa (/) poluna. Tämä on erityinen reitti, jonka React hahmontaa ensin, joten Koti komponentti renderöi, kun suoritat sovelluksesi. Älä sekoita tätä järjestelmää ehdollisen renderöinnin toteuttaminen React-komponenteissasi. Voit antaa tämän polku anna haluamasi nimi.

The elementti attribuutti määrittää komponentin, jonka Reitti tekee.

The linkki komponentti on React Router -komponentti, jota käytetään navigoimaan eri reittejä. Nämä komponentit pääsevät luomillesi eri reiteille.

Esimerkiksi:

tuonti { Linkki } alkaen"react-router-dom";
toimintoKoti() {
palata (



'/noin'>Tietoja sivusta</Link>
'/blogi'>Blogisivu</Link>
Tämä on kotisivu
 </div>
 )
}
viedäoletuksena Koti;

The linkki komponentti on lähes identtinen HTML-ankkuritunnisteen kanssa, se käyttää vain attribuuttia nimeltä "to" eikä "href". The linkki komponentti navigoi reitille vastaavan polun attribuuttina ja hahmontaa reitin komponentin.

Sisäkkäinen reititys ja sen käyttöönotto

React Router tukee sisäkkäistä reititystä, jolloin voit kääriä useita reittejä yhdeksi reitiksi. Tätä käytetään pääasiassa silloin, kun reittien URL-polut ovat samankaltaisia.

Kun olet luonut komponentit, jotka haluat reitittää, kehität jokaiselle niistä yksilölliset reitit sovellus komponentti.

Esimerkiksi:

tuonti { Reitit, reitti } alkaen"react-router-dom"; 
tuonti Artikkelit alkaen'./artikkelit';
tuonti Uusi Artikkeli alkaen'./Uusi artikla';
tuonti Artikkeli Yksi alkaen'./ArticleOne';
toimintoSovellus() {
palata (

'/artikla' element={ }/>
'/artikkeli/uusi' element={ }/>
'/artikkeli/1' element={ }/>
 </Routes>
 )
}
viedäoletuksena Sovellus;

Yllä oleva koodilohko tuo ja reitittää luodut komponentit Artikkelit, Uusi Artikkeli, ja Artikkeli Yksi. URL-poluissa on joitain yhtäläisyyksiä näiden kolmen reitin välillä.

The Uusi Artikkeli Reitin polun nimi alkaa samalla tavalla kuin Artikkelit Reitin polun nimi, johon on lisätty kenoviiva (/) ja sana "uusi", eli (/uusi). Ainoa ero polkunimien välillä Artikkelit Reitti ja Artikkeli Yksi Reitti on vinoviiva (/1) merkin lopussa Artikkeli Yksi komponentin polkunimi.

Voit yhdistää kolme reittiä sen sijaan, että jätät ne nykyiseen tilaan.

Niin kuin:

tuonti { Reitit, reitti } alkaen"react-router-dom";
tuonti Artikkelit alkaen'./artikkelit';
tuonti Uusi Artikkeli alkaen'./Uusi artikla';
tuonti Artikkeli Yksi alkaen'./ArticleOne';
toimintoSovellus() {
palata (

'/artikla'>
 }/>
'/artikkeli/uusi' element={ }/>
'/artikkeli/1' element={ }/>
 </Route>
 </Routes>
 )
}
viedäoletuksena Sovellus;

Olet käärinyt kolme yksittäistä reittiä yhdeksi Reitti elementti. Huomaa, että vanhempi Reitti elementillä on vain polku attribuutti ja nro elementti attribuutti, joka määrittää hahmonnettavan komponentin. The indeksi ominaisuus ensimmäisessä lapsessa Reitti elementti määrittää, että tämä Reitti renderöi, kun siirryt ylätason URL-polkuun Reitti.

Jotta koodisi olisi parempi ja ylläpidettävämpi, sinun tulee määrittää reitit komponentissa ja tuoda se komponenttiin sovellus komponentti käytettäväksi.

Esimerkiksi:

tuonti { Reitit, reitti } alkaen"react-router-dom";
tuonti Artikkelit alkaen'./artikkelit';
tuonti Uusi Artikkeli alkaen'./Uusi artikla';
tuonti Artikkeli Yksi alkaen'./ArticleOne';
toimintoArtikkelireitit() {
palata (

 }/>
'/artikkeli/uusi' element={ }/>
'/artikkeli/1' element={ }/>
 </Routes>
 )
}
viedäoletuksena Artikkelireitit;

Yllä olevan koodilohkon komponentti sisältää sisäkkäiset reitit, jotka olivat aiemmin sovelluskomponentissa. Kun olet luonut komponentin, sinun tulee tuoda se tiedostoon sovellus komponentti ja reititä se yhdellä Reitti elementti.

Esimerkiksi:

tuonti { Reitit, reitti } alkaen"react-router-dom";
tuonti Artikkelireitit alkaen'./ArticleRoutes';
toimintoSovellus() {
palata (

'/artikla/*' element={ }>
 </Routes>
 )
}
viedäoletuksena Sovellus;

Finaalissa Reitti komponentti, lisätyt kenoviiva- ja tähtisymbolit reitin polun loppuun varmistavat, että polkunimi vastaa mitä tahansa polkunimeä, joka alkaa (/artikla).

Reitittimessä on muuta reagoitavaa

Sinun pitäisi nyt olla perehtynyt yksisivuisten sovellusten luomiseen React.js: ssä React Routerin avulla.

React Router -kirjastossa on saatavilla monia muita ominaisuuksia, jotka tekevät kehittäjäkokemuksesta dynaamisemman verkkosovelluksia rakennettaessa.