Single Page Application (SPA) on veebisait või veebirakendus, mis kirjutab dünaamiliselt ümber olemasoleva veebilehe koos uue teabega veebiserverist.

Reacti rakenduses toovad komponendid saidi sisu ja renderdavad selle teie projekti üheks HTML-failiks.

React Router aitab teil navigeerida teie valitud komponendini ja renderdab selle HTML-failis. Selle kasutamiseks peate teadma, kuidas Reacti ruuterit oma Reacti rakendusega seadistada ja integreerida.

Reacti ruuteri installimine

React Routeri installimiseks oma Reacti projekti kasutades npm, JavaScripti paketihaldur, käivitage oma projekti kataloogis järgmine käsk:

npm i react-ruuter-dom

Teise võimalusena saate paketi alla laadida paketihalduri Yarn abil, mis võimaldab installida teegipakette võrguühenduseta.

React Routeri installimiseks lõnga abil käivitage see käsk:

lõng add react-router-dom@6

Reacti ruuteri seadistamine

Reacti ruuteri konfigureerimiseks ja rakenduses kättesaadavaks tegemiseks importige BrowserRouter alates reageerida-ruuter-dom sinu sees index.js faili, seejärel mähkige oma rakenduse komponent sellesse BrowserRouter element:

importida Reageerige alates'reageeri';
importida ReactDOM alates'reageerimis-/klient'; 
importida Rakendus alates'./Rakendus';
importida { BrowserRouter } alates'react-ruuter-dom';
konst root = ReactDOM.createRoot( dokument.getElementById("juur") );
root.render(


 </BrowserRouter>
);

Rakenduse komponendi mähkimine BrowserRouter element annab kogu rakendusele täieliku juurdepääsu ruuteri võimalustele.

Marsruutimine teistele komponentidele

Pärast ruuteri seadistamist rakenduses peaksite looma rakenduse komponendid, neid marsruutima ja renderdama. Järgmine kood impordib ja loob komponendid nimega "Kodu", "Teave" ja "Blogi". Samuti impordib ta Tee ja Marsruudid elemendid alates reageerida-ruuter-dom.

Saate määratleda oma marsruudid Rakendus komponent:

importida { Marsruudid, marsruut } alates'react-ruuter-dom';
importida Kodu alates'./Kodu';
importida Umbes alates'./About';
importida Blogi alates'./Blogi';
funktsiooniRakendus() {
tagasi (

'/' element={ } />
'/umbes' element={ } />
'/blogi' element={ }/>
 </Routes>
 )
}
eksportidavaikimisi Rakendus;

The Rakendus komponent on põhikomponent, mis renderdab kogu koodi, mille olete teistesse komponentidesse kirjutanud.

The Marsruudid element on ülemelement, mis ümbritseb rakenduse komponendis loodud üksikud marsruudid. The Tee element loob ühe marsruudi. Selleks on vaja kahte tugiatribuuti: a tee ja an element.

The tee atribuut määrab soovitud komponendi URL-i tee. Ülaltoodud koodiploki esimene marsruut kasutab teena kaldkriipsu (/). See on spetsiaalne marsruut, mille React esimesena renderdab, nii et Kodu komponent renderdab rakenduse käivitamisel. Ärge ajage seda süsteemi segamini tingimusliku renderduse rakendamine teie Reacti komponentides. Saate selle anda tee omistage mis tahes nimi, mis teile meeldib.

The element atribuut määratleb komponendi, mida Tee renderdab.

The link komponent on React Routeri komponent, mida kasutatakse erinevatel marsruutidel navigeerimiseks. Need komponendid pääsevad juurde erinevatele teie loodud marsruutidele.

Näiteks:

importida { Link } alates'react-ruuter-dom';
funktsiooniKodu() {
tagasi (



'/umbes'>Teave lehe kohta</Link>
'/blogi'>Blogi leht</Link>
See on koduleht
 </div>
 )
}
eksportidavaikimisi Kodu;

The link komponent on peaaegu identne HTML-i ankurmärgendiga, kasutab see lihtsalt atribuuti nimega "to" mitte "href". The link komponent navigeerib marsruudile, mille atribuudiks on vastav teenimi, ja renderdab marsruudi komponendi.

Pesastatud marsruutimine ja selle rakendamine

React Router toetab pesastatud marsruutimist, võimaldades teil mitu marsruuti ühte marsruuti mähkida. Seda kasutatakse peamiselt siis, kui marsruutide URL-i teed on mõnevõrra sarnased.

Kui olete loonud komponendid, mida soovite marsruutida, töötate välja igaühe jaoks eraldi marsruudid rakendus komponent.

Näiteks:

importida { Marsruudid, marsruut } alates'react-ruuter-dom'; 
importida Artiklid alates'./Artiklid';
importida Uus artikkel alates"./Uus artikkel";
importida Artikkel Üks alates"./ArticleOne";
funktsiooniRakendus() {
tagasi (

'/artikkel' element={ }/>
'/artikkel/uus' element={ }/>
'/artikkel/1' element={ }/>
 </Routes>
 )
}
eksportidavaikimisi Rakendus;

Ülaltoodud koodiplokk impordib ja suunab loodud komponendid Artiklid, Uus artikkelja Artikkel Üks. Nende kolme marsruudi URL-i teedel on mõningaid sarnasusi.

The Uus artikkel Marsruudi teenimi algab samaga kui Artiklid Marsruudi teenimi, millele on lisatud kaldkriips (/) ja sõna "uus", st (/uus). Ainus erinevus teenimede vahel Artiklid Marsruut ja Artikkel Üks Marsruut on kaldkriips (/1) tähe lõpus Artikkel Üks komponendi teenimi.

Saate kolm marsruuti pesastada, mitte jätta need praegusesse olekusse.

Nagu nii:

importida { Marsruudid, marsruut } alates'react-ruuter-dom';
importida Artiklid alates'./Artiklid';
importida Uus artikkel alates"./Uus artikkel";
importida Artikkel Üks alates"./ArticleOne";
funktsiooniRakendus() {
tagasi (

'/artikkel'>
 }/>
'/artikkel/uus' element={ }/>
'/artikkel/1' element={ }/>
 </Route>
 </Routes>
 )
}
eksportidavaikimisi Rakendus;

Olete koondanud kolm üksikut marsruuti ühte Tee element. Pange tähele, et vanem Tee elemendil on ainult tee atribuut ja nr element atribuut, mis määrab renderdatava komponendi. The indeks atribuut esimeses lapses Tee element täpsustab, et see Tee renderdab, kui navigeerite vanema URL-i teele Tee.

Koodi paremaks ja hooldatavamaks muutmiseks peaksite määratlema oma marsruudid komponendis ja importima selle üksusesse rakendus komponent kasutamiseks.

Näiteks:

importida { Marsruudid, marsruut } alates'react-ruuter-dom';
importida Artiklid alates'./Artiklid';
importida Uus artikkel alates"./Uus artikkel";
importida Artikkel Üks alates"./ArticleOne";
funktsiooniArtikkelMarsruudid() {
tagasi (

 }/>
'/artikkel/uus' element={ }/>
'/artikkel/1' element={ }/>
 </Routes>
 )
}
eksportidavaikimisi ArtikkelMarsruudid;

Ülaltoodud koodiploki komponent sisaldab pesastatud marsruute, mis olid varem rakenduse komponendis. Pärast komponendi loomist peaksite selle importima rakendus komponenti ja suunake see ühe üksuse abil Tee element.

Näiteks:

importida { Marsruudid, marsruut } alates'react-ruuter-dom';
importida ArtikkelMarsruudid alates'./ArticleRoutes';
funktsiooniRakendus() {
tagasi (

'/artikkel/*' element={ }>
 </Routes>
 )
}
eksportidavaikimisi Rakendus;

Finaalis Tee komponenti, tagavad marsruudi teenime lõppu lisatud kaldkriipsu ja tärni sümbolid, et teenimi vastab mis tahes teenimele, mis algab (/artikkel).

Ruuteril on rohkem reageerida

Nüüd peaksite olema tuttav React.js-i üheleheliste rakenduste loomise põhitõdedega, kasutades React Routerit.

React Routeri teegis on saadaval palju muid funktsioone, mis muudavad arendaja kogemuse veebirakenduste loomisel dünaamilisemaks.