Jednostránková aplikácia (SPA) je webová lokalita alebo webová aplikácia, ktorá dynamicky prepisuje existujúcu webovú stránku novými informáciami z webového servera.

V aplikácii React komponenty získavajú obsah lokality a vykresľujú ho do jedného súboru HTML vo vašom projekte.

React Router vám pomôže navigovať ku komponentu podľa vášho výberu a vykreslí ho v súbore HTML. Aby ste ho mohli používať, musíte vedieť, ako nastaviť a integrovať React Router s vašou aplikáciou React.

Ako nainštalovať React Router

Ak chcete nainštalovať React Router do vášho projektu React pomocou npm, správca balíkov JavaScript, spustite nasledujúci príkaz v adresári projektu:

npm i reagujem-router-dom

Prípadne si môžete balík stiahnuť pomocou Yarn, správcu balíkov, ktorý vám umožňuje inštalovať balíky knižníc offline.

Ak chcete nainštalovať React Router pomocou Yarn, spustite tento príkaz:

priadza pridaj reagovat-router-dom@6

Nastavenie smerovača React

Ak chcete nakonfigurovať React Router a sprístupniť ho vo svojej aplikácii, importujte BrowserRouter od reagovať-smerovač-dom vo svojom vnútri index.js a potom zabaľte komponent aplikácie do súboru BrowserRouter element:

importovať Reagovať od'reagovať';
importovať ReactDOM od'react-dom/client'; 
importovať App od'./App';
importovať { BrowserRouter } od„react-router-dom“;
konšt root = ReactDOM.createRoot( dokument.getElementById('root') );
root.render(


 </BrowserRouter>
);

Zabalenie komponentu aplikácie do BrowserRouter poskytuje celej aplikácii plný prístup k schopnostiam smerovača.

Smerovanie do iných komponentov

Po nastavení smerovača vo vašej aplikácii by ste mali pokračovať a vytvoriť komponenty aplikácie, nasmerovať ich a vykresliť. Nasledujúci kód importuje a vytvára komponenty s názvom „Domov“, „O programe“ a „Blog“. Dováža tiež Trasa a Trasy prvky z reagovať-smerovač-dom.

Svoje Trasy zadefinujete vo vnútri App komponent:

importovať { Routes, Route } od„react-router-dom“;
importovať Domov od'./Domov';
importovať O od'./About';
importovať Blog od'./Blog';
funkciuApp() {
vrátiť (

'/' element={ } />
'/asi' element={ } />
'/blog' element={ }/>
 </Routes>
 )
}
exportpredvolená App;

The App komponent je hlavný komponent, ktorý vykresľuje všetok kód, ktorý ste napísali v ostatných komponentoch.

The Trasy element je nadradený element, ktorý obaľuje jednotlivé trasy, ktoré vytvoríte v komponente aplikácie. The Trasa vytvára jednu trasu. Vyžaduje si to dva atribúty opory: a cesta a element.

The cesta atribút definuje cestu URL zamýšľaného komponentu. Prvá trasa vo vyššie uvedenom bloku kódu používa opačnú lomku (/) ako svoju cestu. Toto je špeciálna cesta, ktorú React vykreslí ako prvú, takže Domov komponent sa vykreslí pri spustení vašej aplikácie. Nezamieňajte si tento systém s implementáciu podmieneného vykresľovania vo vašich komponentoch React. Môžete dať toto cesta priraďte ľubovoľné meno, ktoré sa vám páči.

The element atribút definuje komponent, ktorý Trasa vykreslí.

The odkaz komponent je komponent React Router používaný na navigáciu rôznych trás. Tieto komponenty pristupujú k rôznym trasám, ktoré ste vytvorili.

Napríklad:

importovať { Link } od„react-router-dom“;
funkciuDomov() {
vrátiť (



'/asi'>O stránke</Link>
'/blog'>Stránka blogu</Link>
Toto je domovská stránka
 </div>
 )
}
exportpredvolená Domov;

The odkaz komponent je takmer identický s tagom kotvy HTML, len používa atribút s názvom "to" namiesto "href". The odkaz komponent naviguje na Trasu so zodpovedajúcim názvom cesty ako jej atribútom a vykreslí komponent Trasy.

Vnorené smerovanie a ako ho implementovať

Router React podporuje vnorené smerovanie, čo vám umožňuje zabaliť viacero ciest do jednej cesty. Toto sa používa hlavne vtedy, keď existuje určitá podobnosť v URL cestách trás.

Po vytvorení komponentov, ktoré chcete smerovať, vytvoríte jednotlivé trasy pre každú z nich v aplikácie komponent.

Napríklad:

importovať { Routes, Route } od„react-router-dom“; 
importovať články od'./Články';
importovať Nový článok od'./NewArticle';
importovať Článok 1 od'./ArticleOne';
funkciuApp() {
vrátiť (

'/článok' element={ }/>
'/článok/nový' element={ }/>
'/article/1' element={ }/>
 </Routes>
 )
}
exportpredvolená App;

Vyššie uvedený blok kódu importuje a nasmeruje vytvorené komponenty články, Nový článok, a Článok 1. Cesty URL medzi týmito tromi trasami majú určité podobnosti.

The Nový článok Názov cesty začína rovnako ako články Názov cesty s pridanou spätnou lomkou (/) a slovom „new“, t. j. (/new). Jediný rozdiel medzi názvami ciest články Trasa a Článok 1 Trasa je lomka (/1) na konci Článok 1 názov cesty komponentu.

Namiesto toho, aby ste ich nechali v aktuálnom stave, môžete tri trasy vložiť do seba.

Ako:

importovať { Routes, Route } od„react-router-dom“;
importovať články od'./Články';
importovať Nový článok od'./NewArticle';
importovať Článok 1 od'./ArticleOne';
funkciuApp() {
vrátiť (

'/článok'>
 }/>
'/článok/nový' element={ }/>
'/article/1' element={ }/>
 </Route>
 </Routes>
 )
}
exportpredvolená App;

Zbalili ste tri jednotlivé trasy do jednej Trasa element. Všimnite si, že rodič Trasa prvok má iba cesta atribút a č element atribút, ktorý definuje komponent, ktorý sa má vykresliť. The index atribút u prvého dieťaťa Trasa prvok určuje, že toto Trasa vykreslí, keď prejdete na cestu URL nadradenej adresy Trasa.

Aby bol váš kód lepší a lepšie udržiavateľný, mali by ste definovať svoje trasy v komponente a importovať ich do aplikácie komponent na použitie.

Napríklad:

importovať { Routes, Route } od„react-router-dom“;
importovať články od'./Články';
importovať Nový článok od'./NewArticle';
importovať Článok 1 od'./ArticleOne';
funkciuČlánokRoutes() {
vrátiť (

 }/>
'/článok/nový' element={ }/>
'/article/1' element={ }/>
 </Routes>
 )
}
exportpredvolená článokRoutes;

Komponent v bloku kódu vyššie obsahuje vnorené trasy, ktoré boli predtým v komponente aplikácie. Po vytvorení komponentu by ste ho mali importovať do aplikácie komponent a smerovať ho pomocou jedného Trasa element.

Napríklad:

importovať { Routes, Route } od„react-router-dom“;
importovať ČlánokRoutes od'./ArticleRoutes';
funkciuApp() {
vrátiť (

'/článok/*' element={ }>
 </Routes>
 )
}
exportpredvolená App;

Vo finále Trasa komponent, pridané spätné lomítko a symboly hviezdičky na konci názvu cesty zabezpečujú, že názov cesty zodpovedá akejkoľvek ceste, ktorá začína (/článok).

Router na reakciu má viac

Teraz by ste mali byť oboznámení so základmi vytvárania jednostránkových aplikácií v React.js pomocou React Router.

V knižnici React Router je k dispozícii mnoho ďalších funkcií, vďaka ktorým je zážitok vývojárov pri vytváraní webových aplikácií dynamickejší.