Az egyoldalas alkalmazás (SPA) olyan webhely vagy webalkalmazás, amely dinamikusan átír egy meglévő weboldalt a webszervertől érkező új információkkal.

A React alkalmazásban az összetevők lekérik a webhely tartalmát, és egyetlen HTML-fájlba jelenítik meg a projektben.

A React Router segít navigálni a választott összetevőhöz, és megjeleníti azt a HTML-fájlban. Használatához tudnia kell, hogyan kell beállítani és integrálni a React Routert a React alkalmazással.

A React Router telepítése

A React Router telepítéséhez a React projektbe a segítségével npm, a JavaScript csomagkezelő, futtassa a következő parancsot a projektkönyvtárban:

npm i react-router-dom

Alternatív megoldásként letöltheti a csomagot a Yarn csomagkezelővel, amely lehetővé teszi a könyvtári csomagok offline telepítését.

A React Router Yarn használatával történő telepítéséhez futtassa ezt a parancsot:

fonal add react-router-dom@6

A React Router beállítása

A React Router konfigurálásához és az alkalmazásban elérhetővé tételéhez importálja BrowserRouter tól től react-router-dom benned index.js fájlt, majd csomagolja be az alkalmazás összetevőjét a BrowserRouter elem:

import Reagál tól től'reagál';
import ReactDOM tól től'react-dom/client'; 
import App tól től'./Alkalmazás';
import { BrowserRouter } tól től"react-router-dom";
const root = ReactDOM.createRoot( dokumentum.getElementById('gyökér') );
root.render(


 </BrowserRouter>
);

Az alkalmazáskomponens becsomagolása a BrowserRouter elem teljes hozzáférést biztosít az egész alkalmazásnak a router képességeihez.

Útválasztás más komponensekhez

Miután beállította az útválasztót az alkalmazásban, hozza létre az alkalmazásösszetevőket, irányítsa át és jelenítse meg őket. A következő kód importálja és létrehozza a „Home”, „About” és „Blog” nevű összetevőket. Azt is importálja a Útvonal és Útvonalak elemekből react-router-dom.

Az Útvonalakat az oldalon belül fogja meghatározni App összetevő:

import { Útvonalak, Útvonal } tól től"react-router-dom";
import itthon tól től'./Itthon';
import Ról ről tól től'./Ról ről';
import Blog tól től'./Blog';
funkcióApp() {
Visszatérés (

'/' elem={ } />
'/ról ről' elem={ } />
'/blog' elem={ }/>
 </Routes>
 )
}
exportalapértelmezett App;

A App komponens az a fő összetevő, amely megjeleníti a többi összetevőbe írt összes kódot.

A Útvonalak Az elem a szülőelem, amely az alkalmazáskomponensben létrehozott egyedi útvonalakat körbeveszi. A Útvonal elem egyetlen útvonalat hoz létre. Két kellék attribútumot igényel: a pálya és egy elem.

A pálya attribútum határozza meg a kívánt összetevő URL elérési útját. A fenti kódblokk első útvonala egy fordított perjelet (/) használ elérési útjaként. Ez egy speciális útvonal, amelyet a React fog először megjeleníteni, így a itthon komponens jelenik meg az alkalmazás futtatásakor. Ne keverje össze ezt a rendszert feltételes megjelenítés megvalósítása a React komponensekben. Ezt adhatod pálya bármilyen nevet adjon hozzá.

A elem attribútum határozza meg azt az összetevőt, amelyet a Útvonal fog renderelni.

A link komponens egy React Router komponens, amelyet különböző útvonalak navigálására használnak. Ezek az összetevők hozzáférnek az Ön által létrehozott különféle útvonalakhoz.

Például:

import { Link } tól től"react-router-dom";
funkcióitthon() {
Visszatérés (



'/ról ről'>Az oldalról</Link>
'/blog'>Blogoldal</Link>
Ez a Kezdőlap
 </div>
 )
}
exportalapértelmezett Itthon;

A link komponens közel azonos a HTML horgonycímkével, csak egy "to" nevű attribútumot használ a "href" helyett. A link komponens az Útvonalhoz navigál a megfelelő útvonalnévvel attribútumként, és megjeleníti az útvonal összetevőjét.

Beágyazott útválasztás és megvalósítása

A React Router támogatja a beágyazott útválasztást, lehetővé téve, hogy több útvonalat egyetlen útvonalba csomagoljon. Ezt főleg akkor használják, ha az útvonalak URL-útvonalai hasonlóak.

Miután létrehozta az irányítani kívánt összetevőket, mindegyikhez külön útvonalat fog kidolgozni a következőben kb összetevő.

Például:

import { Útvonalak, Útvonal } tól től"react-router-dom"; 
import Cikkek tól től"./Cikkek";
import Új cikk tól től'./Új cikk';
import Egy cikk tól től"./ArticleOne";
funkcióApp() {
Visszatérés (

'/cikk' elem={ }/>
'/cikk/új' elem={ }/>
"/cikk/1" elem={ }/>
 </Routes>
 )
}
exportalapértelmezett App;

A fenti kódblokk importálja és irányítja a létrehozott összetevőket Cikkek, Új cikk, és Egy cikk. Van némi hasonlóság a három útvonal URL-útvonalaiban.

A Új cikk Az útvonal elérési útja ugyanúgy kezdődik, mint a Cikkek Az útvonal elérési útja egy fordított perjellel (/) és az "új", azaz (/new) szóval. Az egyetlen különbség az elérési út nevei között Cikkek Útvonal és a Egy cikk Az útvonal a perjel (/1) a végén Egy cikk az összetevő elérési útja.

A három útvonalat egymásba ágyazhatja, ahelyett, hogy a jelenlegi állapotukban hagyná őket.

Például így:

import { Útvonalak, Útvonal } tól től"react-router-dom";
import Cikkek tól től"./Cikkek";
import Új cikk tól től'./Új cikk';
import Egy cikk tól től"./ArticleOne";
funkcióApp() {
Visszatérés (

'/cikk'>
 }/>
'/cikk/új' elem={ }/>
"/cikk/1" elem={ }/>
 </Route>
 </Routes>
 )
}
exportalapértelmezett App;

A három különálló útvonalat egyetlen egybe csomagolta Útvonal elem. Vegye figyelembe, hogy a szülő Útvonal elemnek csak a pálya attribútum és sz elem attribútum, amely meghatározza a megjelenítendő összetevőt. A index tulajdonság az első gyermekben Útvonal elem határozza meg, hogy ez Útvonal akkor jelenik meg, amikor a szülő URL-útvonalához navigál Útvonal.

A kód jobbá és karbantarthatóbbá tétele érdekében meg kell határoznia az útvonalakat egy összetevőben, és importálnia kell a programba kb komponens használatra.

Például:

import { Útvonalak, Útvonal } tól től"react-router-dom";
import Cikkek tól től"./Cikkek";
import Új cikk tól től'./Új cikk';
import Egy cikk tól től"./ArticleOne";
funkcióCikk Útvonalak() {
Visszatérés (

 }/>
'/cikk/új' elem={ }/>
"/cikk/1" elem={ }/>
 </Routes>
 )
}
exportalapértelmezett cikkÚtvonalak;

A fenti kódblokk összetevője tartalmazza azokat a beágyazott útvonalakat, amelyek korábban az alkalmazáskomponensben voltak. Az összetevő létrehozása után importálnia kell a kb komponenst, és irányítsa egyetlen elem segítségével Útvonal elem.

Például:

import { Útvonalak, Útvonal } tól től"react-router-dom";
import Cikk Útvonalak tól től'./ArticleRoutes';
funkcióApp() {
Visszatérés (

'/cikk/*' elem={ }>
 </Routes>
 )
}
exportalapértelmezett App;

A döntőben Útvonal összetevőt, az útvonal elérési útja végén lévő fordított perjel és csillag szimbólumok biztosítják, hogy az útvonalnév megfeleljen minden olyan útvonalnévnek, amely (/cikk).

Van még mit reagálni a routerre

Most már ismernie kell az egyoldalas alkalmazások React.js programban való létrehozásának alapjait a React Router használatával.

A React Router könyvtárban számos további funkció is elérhető, amelyek dinamikusabbá teszik a fejlesztői élményt webalkalmazások készítése során.