Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Jednostránková aplikace (SPA) je webová stránka nebo webová aplikace, která dynamicky přepisuje existující webovou stránku novými informacemi z webového serveru.

V aplikaci React komponenty získávají obsah webu a vykreslují jej do jediného souboru HTML ve vašem projektu.

React Router vám pomůže navigovat ke komponentě podle vašeho výběru a vykreslí ji v souboru HTML. Chcete-li jej používat, musíte vědět, jak nastavit a integrovat React Router s aplikací React.

Jak nainstalovat React Router

Chcete-li nainstalovat React Router do vašeho projektu React pomocí npm, správce balíčků JavaScript, spusťte v adresáři projektu následující příkaz:

npm i reagovat-router-dom

Alternativně si můžete balíček stáhnout pomocí Yarn, správce balíčků, který vám umožňuje instalovat balíčky knihoven offline.

Chcete-li nainstalovat React Router pomocí Yarn, spusťte tento příkaz:

instagram viewer 
příze přidat reagovat-router-dom@6

Nastavení routeru React

Chcete-li nakonfigurovat React Router a zpřístupnit jej ve vaší aplikaci, importujte BrowserRouter z reagovat-router-dom uvnitř tvého index.js a poté zabalte komponentu aplikace do souboru BrowserRouter živel:

import Reagovat z'reagovat';
import ReactDOM z'react-dom/client'; 
import Aplikace z'./Aplikace';
import { BrowserRouter } z'react-router-dom';
konst root = ReactDOM.createRoot( dokument.getElementById('vykořenit') );
root.render(


 </BrowserRouter>
);

Zabalení komponenty aplikace do BrowserRouter poskytuje celé aplikaci plný přístup ke schopnostem routeru.

Směrování do jiných komponent

Po nastavení směrovače ve vaší aplikaci byste měli pokračovat a vytvořit součásti aplikace, nasměrovat je a vykreslit. Následující kód importuje a vytváří komponenty s názvem „Domů“, „O aplikaci“ a „Blog“. Dováží také Trasa a Trasy prvky z reagovat-router-dom.

Své Trasy definujete uvnitř Aplikace komponent:

import { Routes, Route } z'react-router-dom';
import Domov z'./Domov';
import O z'./O';
import Blog z'./Blog';
funkceAplikace() {
vrátit se (

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


vývoznívýchozí Aplikace;

The Aplikace komponenta je hlavní komponenta, která vykresluje veškerý kód, který jste napsali v ostatních komponentách.

The Trasy element je nadřazený element, který obaluje jednotlivé trasy, které vytvoříte v komponentě aplikace. The Trasa prvek vytváří jedinou trasu. Vyžaduje dva atributy rekvizity: a cesta a živel.

The cesta atribut definuje cestu URL zamýšlené komponenty. První trasa ve výše uvedeném bloku kódu používá jako cestu zpětné lomítko (/). Toto je speciální cesta, kterou React vykreslí jako první, takže Domov komponenta se vykreslí při spuštění aplikace. Nezaměňujte tento systém s implementaci podmíněného vykreslování ve vašich komponentách React. Můžeš dát tohle cesta přiřaďte libovolné jméno, které se vám líbí.

The živel atribut definuje komponentu, kterou Trasa vykreslí.

The odkaz komponenta je komponenta React Router používaná k navigaci na různých trasách. Tyto komponenty přistupují k různým trasám, které jste vytvořili.

Například:

import { Odkaz } z'react-router-dom';
funkceDomov() {
vrátit se (




'/o'>O stránce</Link>
'/blog'>Stránka blogu</Link>
Toto je domovská stránka
 </div>
 )
}


vývoznívýchozí Domov;

The odkaz komponenta je téměř identická s tagem kotvy HTML, pouze používá atribut s názvem "to" místo "href". The odkaz komponenta naviguje na Trasu s odpovídajícím názvem cesty jako jejím atributem a vykreslí komponentu Trasa.

Vnořené směrování a jak jej implementovat

Směrovač React podporuje vnořené směrování, což vám umožňuje zabalit více cest do jedné cesty. To se používá hlavně v případě, že existuje určitá podobnost v URL cestách tras.

Jakmile vytvoříte komponenty, které chcete routovat, vytvoříte pro každou z nich jednotlivé trasy aplikace komponent.

Například:

import { Routes, Route } z'react-router-dom'; 
import články z'./Články';
import Nový článek z'./NewArticle';
import Článek jedna z'./ArticleOne';
funkceAplikace() {
vrátit se (

'/článek' element={ }/>
'/článek/nový' element={ }/>
'/Článek 1' element={ }/>
 </Routes>
 )
}
vývoznívýchozí Aplikace;

Výše uvedený blok kódu importuje a směruje vytvořené komponenty články, Nový článek, a Článek jedna. Mezi těmito třemi cestami existují určité podobnosti v cestách URL.

The Nový článek Cesta cesty začíná stejně jako články Název cesty s přidaným zpětným lomítkem (/) a slovem „new“, tj. (/new). Jediný rozdíl mezi názvy cest články Trasa a Článek jedna Trasa je lomítko (/1) na konci Článek jedna název cesty komponenty.

Tyto tři trasy můžete vnořit, aniž byste je nechali v jejich aktuálním stavu.

Jako tak:

import { Routes, Route } z'react-router-dom';
import články z'./Články';
import Nový článek z'./NewArticle';
import Článek jedna z'./ArticleOne';
funkceAplikace() {
vrátit se (

'/článek'>
 }/>
'/článek/nový' element={ }/>
'/Článek 1' element={ }/>
 </Route>
 </Routes>
 )
}
vývoznívýchozí Aplikace;

Zabalili jste tři jednotlivé trasy do jediné Trasa živel. Všimněte si, že rodič Trasa prvek má pouze cesta atribut a ne živel atribut, který definuje komponentu k vykreslení. The index atribut u prvního dítěte Trasa prvek určuje, že toto Trasa vykreslí, když přejdete na cestu URL nadřazeného objektu Trasa.

Aby byl váš kód lepší a lépe udržovatelný, měli byste definovat své trasy v komponentě a importovat ji do aplikace součást k použití.

Například:

import { Routes, Route } z'react-router-dom';
import články z'./Články';
import Nový článek z'./NewArticle';
import Článek jedna z'./ArticleOne';
funkceČlánekRoutes() {
vrátit se (

 }/>
'/článek/nový' element={ }/>
'/Článek 1' element={ }/>
 </Routes>
 )
}
vývoznívýchozí ArticleRoutes;

Komponenta v bloku kódu výše obsahuje vnořené trasy, které byly dříve v komponentě aplikace. Po vytvoření komponenty byste ji měli importovat do aplikace komponentu a směrovat ji pomocí jediného Trasa živel.

Například:

import { Routes, Route } z'react-router-dom';
import ČlánekRoutes z'./ArticleRoutes';
funkceAplikace() {
vrátit se (

'/článek/*' element={ }>
 </Routes>
 )
}
vývoznívýchozí Aplikace;

Ve finále Trasa komponenty, přidané zpětné lomítko a symboly hvězdičky na konci názvu cesty zajišťují, že název cesty odpovídá jakékoli cestě, která začíná (/článek).

Router má více možností

Nyní byste měli být obeznámeni se základy vytváření jednostránkových aplikací v React.js pomocí React Router.

V knihovně React Router je k dispozici mnoho dalších funkcí, díky nimž je vývojář při vytváření webových aplikací dynamičtější.