Aplikacija jedne stranice (SPA) je web stranica ili web aplikacija koja dinamički prepisuje postojeću web stranicu s novim informacijama s web poslužitelja.

U React aplikaciji, komponente dohvaćaju sadržaj stranice i prikazuju ga u jednoj HTML datoteci u vašem projektu.

React Router pomaže vam da dođete do komponente po vašem izboru i prikazuje je u HTML datoteci. Da biste ga koristili, morate znati kako postaviti i integrirati React Router sa svojom React aplikacijom.

Kako instalirati React Router

Da biste instalirali React Router u svoj React projekt pomoću npm, JavaScript upravitelj paketa, pokrenite sljedeću naredbu u vašem direktoriju projekta:

npm reagiram-usmjerivač-dom

Alternativno, paket možete preuzeti koristeći Yarn, upravitelj paketa koji vam omogućuje izvanmrežnu instalaciju paketa knjižnice.

Da biste instalirali React Router koristeći Yarn, pokrenite ovu naredbu:

yarn add react-router-dom@6

Postavljanje React usmjerivača

Da biste konfigurirali React Router i učinili ga dostupnim u svojoj aplikaciji, uvozite BrowserRouter iz reagirati-usmjerivač-dom unutar vašeg index.js datoteku, a zatim omotajte svoju komponentu aplikacije u BrowserRouter element:

uvoz Reagirati iz'reagirati';
uvoz ReactDOM iz'react-dom/client'; 
uvoz aplikacija iz'./Aplikacija';
uvoz {BrowserRouter} iz'react-router-dom';
konst korijen = ReactDOM.createRoot( dokument.getElementById('korijen') );
root.render(


 </BrowserRouter>
);

Omotavanje komponente aplikacije u BrowserRouter daje cijeloj aplikaciji puni pristup mogućnostima usmjerivača.

Usmjeravanje na druge komponente

Nakon postavljanja vašeg usmjerivača u vašoj aplikaciji, trebali biste krenuti naprijed i izraditi komponente svoje aplikacije, usmjeriti ih i renderirati. Sljedeći kod uvozi i stvara komponente pod nazivom "Početna", "O" i "Blog". Također uvozi Ruta i Rute elementi iz reagirati-usmjerivač-dom.

Svoje ćete rute definirati unutar aplikacija komponenta:

uvoz { Rute, ruta } iz'react-router-dom';
uvoz Dom iz'./Dom';
uvoz Oko iz'./Oko';
uvoz Blog iz'./Blog';
funkcijaaplikacija() {
povratak (

'/' element={ } />
'/oko' element={ } />
'/blog' element={ }/>
 </Routes>
 )
}
izvozzadano aplikacija;

The aplikacija komponenta je glavna komponenta koja renderira sav kod koji ste napisali u drugim komponentama.

The Rute element je nadređeni element koji obavija pojedinačne rute koje stvorite u svojoj komponenti aplikacije. The Ruta element stvara jednu rutu. Potrebna su dva atributa rekvizita: a staza i an element.

The staza atribut definira URL stazu namjeravane komponente. Prva Ruta u gornjem bloku koda koristi obrnutu kosu crtu (/) kao svoj put. Ovo je posebna ruta koju će React prvo renderirati, tako da Dom komponenta se prikazuje kada pokrenete svoju aplikaciju. Ne brkajte ovaj sustav s implementiranje uvjetnog prikazivanja u vašim React komponentama. Možeš dati ovo staza pripišite bilo koje ime koje želite.

The element atribut definira komponentu koju Ruta prikazat će.

The veza komponenta je React Router komponenta koja se koristi za navigaciju različitim rutama. Ove komponente pristupaju različitim rutama koje ste izradili.

Na primjer:

uvoz { Veza } iz'react-router-dom';
funkcijaDom() {
povratak (



'/oko'>O stranici</Link>
'/blog'>Stranica bloga</Link>
Ovo je početna stranica
 </div>
 )
}
izvozzadano Dom;

The veza komponenta je gotovo identična HTML oznaci sidra, samo koristi atribut pod nazivom "to" umjesto "href". The veza komponenta navigira do rute s odgovarajućim nazivom putanje kao atributom i prikazuje komponentu rute.

Ugniježđeno usmjeravanje i kako ga implementirati

React Router podržava ugniježđeno usmjeravanje, što vam omogućuje da omotate više ruta u jednu rutu. Ovo se uglavnom koristi kada postoji neka sličnost u URL stazama ruta.

Nakon što stvorite komponente koje želite usmjeriti, razvit ćete pojedinačne Rute za svaku od njih u aplikacija komponenta.

Na primjer:

uvoz { Rute, ruta } iz'react-router-dom'; 
uvoz Članci iz'./Članci';
uvoz NoviČlanak iz'./Novi članak';
uvoz Članak jedan iz'./Prvi članak';
funkcijaaplikacija() {
povratak (

'/članak' element={ }/>
'/članak/novo' element={ }/>
'/članak/1' element={ }/>
 </Routes>
 )
}
izvozzadano aplikacija;

Gornji blok koda uvozi i usmjerava stvorene komponente Članci, NoviČlanak, i Članak jedan. Postoje neke sličnosti u URL putovima između tri rute.

The NoviČlanak Naziv putanje rute počinje isto kao i Članci Naziv putanje rute, s dodanom obrnutom kosom crtom (/) i riječju "novo", tj. (/novo). Jedina razlika između naziva staza od Članci Ruta i Članak jedan Ruta je kosa crta (/1) na kraju Članak jedan naziv putanje komponente.

Možete ugnijezditi tri Rute umjesto da ih ostavite u njihovom trenutnom stanju.

ovako:

uvoz { Rute, ruta } iz'react-router-dom';
uvoz Članci iz'./Članci';
uvoz NoviČlanak iz'./Novi članak';
uvoz Članak jedan iz'./Prvi članak';
funkcijaaplikacija() {
povratak (

'/članak'>
 }/>
'/članak/novo' element={ }/>
'/članak/1' element={ }/>
 </Route>
 </Routes>
 )
}
izvozzadano aplikacija;

Zamotali ste tri pojedinačne rute u jednu Ruta element. Imajte na umu da roditelj Ruta element ima samo staza atribut i br element atribut koji definira komponentu za prikaz. The indeks atribut u prvom djetetu Ruta element specificira da ovaj Ruta prikazuje kada se pomaknete na URL putanju roditelja Ruta.

Kako bi vaš kod bio bolji i lakši za održavanje, trebali biste definirati svoje rute u komponenti i uvesti ih u aplikacija komponenta za korištenje.

Na primjer:

uvoz { Rute, ruta } iz'react-router-dom';
uvoz Članci iz'./Članci';
uvoz NoviČlanak iz'./Novi članak';
uvoz Članak jedan iz'./Prvi članak';
funkcijaArticleRoutes() {
povratak (

 }/>
'/članak/novo' element={ }/>
'/članak/1' element={ }/>
 </Routes>
 )
}
izvozzadano ArticleRoutes;

Komponenta u gornjem bloku koda sadrži ugniježđene Rute koje su prije bile u komponenti aplikacije. Nakon što izradite komponentu, trebate je uvesti u aplikacija komponentu i usmjerite je pomoću jednog Ruta element.

Na primjer:

uvoz { Rute, ruta } iz'react-router-dom';
uvoz ArticleRoutes iz'./ArticleRoutes';
funkcijaaplikacija() {
povratak (

'/članak/*' element={ }>
 </Routes>
 )
}
izvozzadano aplikacija;

U finalu Ruta komponenta, dodani simboli obrnute kose crte i zvjezdice na kraju naziva putanje rute osiguravaju da naziv putanje odgovara svakom nazivu putanje koji počinje s (/članak).

Ima više za React Router

Sada biste trebali biti upoznati s osnovama izrade jednostraničkih aplikacija u React.js, koristeći React Router.

U biblioteci React Routera dostupno je mnogo više značajki koje razvojno iskustvo čine dinamičnijim pri izradi web aplikacija.