Enostranska aplikacija (SPA) je spletno mesto ali spletna aplikacija, ki dinamično prepiše obstoječo spletno stran z novimi informacijami iz spletnega strežnika.

V aplikaciji React komponente pridobijo vsebino spletnega mesta in jo upodabljajo v eno datoteko HTML v vašem projektu.

React Router vam pomaga pri navigaciji do komponente po vaši izbiri in jo upodablja v datoteki HTML. Če ga želite uporabljati, morate vedeti, kako nastaviti in integrirati React Router z vašo aplikacijo React.

Kako namestiti React Router

Za namestitev usmerjevalnika React v vaš projekt React uporabite npm, upravitelj paketov JavaScript, zaženite naslednji ukaz v vašem imeniku projekta:

npm reagiram-usmerjevalnik-dom

Druga možnost je, da paket prenesete z Yarn, upraviteljem paketov, ki vam omogoča namestitev knjižničnih paketov brez povezave.

Če želite namestiti React Router s pomočjo Yarn, zaženite ta ukaz:

yarn add react-router-dom@6

Nastavitev usmerjevalnika React

Če želite konfigurirati React Router in ga dati na voljo v vaši aplikaciji, uvozite BrowserRouter od reagirati-usmerjevalnik-dom znotraj tvojega index.js datoteko, nato ovijte svojo komponento aplikacije v BrowserRouter element:

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


 </BrowserRouter>
);

Ovijanje komponente aplikacije v BrowserRouter daje celotni aplikaciji popoln dostop do zmožnosti usmerjevalnika.

Usmerjanje do drugih komponent

Ko nastavite usmerjevalnik v svoji aplikaciji, morate ustvariti komponente svoje aplikacije, jih usmeriti in upodobiti. Naslednja koda uvozi in ustvari komponente z imenom »Domača stran«, »Vizitka« in »Blog«. Prav tako uvaža Pot in Poti elementi iz reagirati-usmerjevalnik-dom.

Svoje poti boste določili znotraj aplikacija komponenta:

uvoz { Poti, pot } od'react-router-dom';
uvoz domov od'./Domov';
uvoz O tem od'./O';
uvoz Blog od'./Blog';
funkcijoaplikacija() {
vrnitev (

'/' element={ } />
'/o' element={ } />
'/blog' element={ }/>
 </Routes>
 )
}
izvozprivzeto aplikacija;

The aplikacija komponenta je glavna komponenta, ki upodablja vso kodo, ki ste jo napisali v drugih komponentah.

The Poti element je nadrejeni element, ki ovije posamezne poti, ki jih ustvarite v komponenti aplikacije. The Pot element ustvari eno pot. Potrebuje dva atributa prop: a pot in an element.

The pot atribut določa URL pot predvidene komponente. Prva pot v zgornjem kodnem bloku kot svojo pot uporablja poševnico nazaj (/). To je posebna pot, ki jo bo React najprej upodobil, tako da domov upodobitve komponent, ko zaženete aplikacijo. Ne zamenjujte tega sistema z izvajanje pogojnega upodabljanja v vaših komponentah React. Lahko daš to pot pripišite poljubno ime.

The element atribut definira komponento, ki jo Pot bo upodobil.

The povezava komponenta je komponenta usmerjevalnika React, ki se uporablja za krmarjenje po različnih poteh. Te komponente dostopajo do različnih poti, ki ste jih ustvarili.

Na primer:

uvoz { Povezava } od'react-router-dom';
funkcijodomov() {
vrnitev (



'/o'>Stran o tem</Link>
'/blog'>Stran spletnega dnevnika</Link>
To je domača stran
 </div>
 )
}
izvozprivzeto Domov;

The povezava komponenta je skoraj enaka sidrni oznaki HTML, uporablja samo atribut z imenom "to" namesto "href". The povezava komponenta navigira do poti z ustreznim imenom poti kot atributom in upodobi komponento poti.

Ugnezdeno usmerjanje in kako ga implementirati

React Router podpira ugnezdeno usmerjanje, kar vam omogoča, da zavijete več poti v eno samo pot. To se večinoma uporablja, kadar je v URL poteh poti nekaj podobnosti.

Ko ustvarite komponente, ki jih želite usmeriti, boste razvili posamezne poti za vsako od njih v aplikacija komponento.

Na primer:

uvoz { Poti, pot } od'react-router-dom'; 
uvoz Članki od'./Članki';
uvoz Nov članek od'./Nov članek';
uvoz Prvi člen od'./ArticleOne';
funkcijoaplikacija() {
vrnitev (

'/Članek' element={ }/>
'/članek/novo' element={ }/>
'/article/1' element={ }/>
 </Routes>
 )
}
izvozprivzeto aplikacija;

Zgornji blok kode uvozi in usmerja ustvarjene komponente Članki, Nov članek, in Prvi člen. Med tremi potmi je nekaj podobnosti v poteh URL.

The Nov članek Ime poti poti se začne enako kot Članki Ime poti poti z dodano poševnico nazaj (/) in besedo "novo", tj. (/novo). Edina razlika med imeni poti v Članki Pot in Prvi člen Route je poševnica (/1) na koncu Prvi člen ime poti komponente.

Tri poti lahko ugnezdite, namesto da jih pustite v trenutnem stanju.

takole:

uvoz { Poti, pot } od'react-router-dom';
uvoz Članki od'./Članki';
uvoz Nov članek od'./Nov članek';
uvoz Prvi člen od'./ArticleOne';
funkcijoaplikacija() {
vrnitev (

'/Članek'>
 }/>
'/članek/novo' element={ }/>
'/article/1' element={ }/>
 </Route>
 </Routes>
 )
}
izvozprivzeto aplikacija;

Tri posamezne poti ste zavili v eno samo Pot element. Upoštevajte, da starš Pot element ima samo pot atribut in št element atribut, ki definira komponento za upodabljanje. The kazalo atribut v prvem otroku Pot element določa, da to Pot upodobi, ko se pomaknete na pot URL nadrejenega Pot.

Če želite, da bo vaša koda boljša in bolj vzdržljiva, morate svoje poti definirati v komponenti in jo uvoziti v aplikacija komponento za uporabo.

Na primer:

uvoz { Poti, pot } od'react-router-dom';
uvoz Članki od'./Članki';
uvoz Nov članek od'./Nov članek';
uvoz Prvi člen od'./ArticleOne';
funkcijoArticleRoutes() {
vrnitev (

 }/>
'/članek/novo' element={ }/>
'/article/1' element={ }/>
 </Routes>
 )
}
izvozprivzeto ArticleRoutes;

Komponenta v zgornjem bloku kode vsebuje ugnezdene poti, ki so bile prej v komponenti aplikacije. Ko ustvarite komponento, jo morate uvoziti v aplikacija komponento in jo usmerite z enojnim Pot element.

Na primer:

uvoz { Poti, pot } od'react-router-dom';
uvoz ArticleRoutes od'./ArticleRoutes';
funkcijoaplikacija() {
vrnitev (

'/Članek/*' element={ }>
 </Routes>
 )
}
izvozprivzeto aplikacija;

V finalu Pot dodani simboli povratne poševnice in zvezdice na koncu imena poti Route zagotavljajo, da se ime poti ujema s katerim koli imenom poti, ki se začne z (/Članek).

React Router ponuja še več

Zdaj bi morali biti seznanjeni z osnovami izdelave enostranskih aplikacij v React.js z uporabo React Routerja.

V knjižnici React Router je na voljo veliko več funkcij, ki naredijo razvijalsko izkušnjo bolj dinamično pri gradnji spletnih aplikacij.