Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Een Single Page Application (SPA) is een website of webapplicatie die een bestaande webpagina dynamisch herschrijft met nieuwe informatie van de webserver.

In een React-toepassing halen componenten site-inhoud op en geven deze weer in een enkel HTML-bestand in uw project.

React Router helpt u bij het navigeren naar het onderdeel van uw keuze en geeft het weer in het HTML-bestand. Om het te gebruiken, moet u weten hoe u React Router instelt en integreert met uw React-toepassing.

Hoe React Router te installeren

Om React Router in uw React-project te installeren met behulp van npm, de JavaScript-pakketbeheerder, voer de volgende opdracht uit in uw projectdirectory:

npm i reactie-router-dom

U kunt het pakket ook downloaden met behulp van Yarn, een pakketbeheerder waarmee u bibliotheekpakketten offline kunt installeren.

Voer deze opdracht uit om React Router met Yarn te installeren:

garen voeg reactie-router-dom@6 toe

React Router instellen

Om React Router te configureren en beschikbaar te maken in uw toepassing, importeert u BrowserRouter van reactie-router-dom in je index.js -bestand en wikkel uw app-component vervolgens in de BrowserRouter element:

importeren Reageer van'Reageer';
importeren ReactDOM van'react-dom/klant'; 
importeren app van'./App';
importeren { BrowserRouter } van'reageren-router-dom';
const root = ReactDOM.createRoot( document.getElementById('wortel') );
root.render(


 </BrowserRouter>
);

De app-component inpakken in de BrowserRouter element geeft de hele app volledige toegang tot de mogelijkheden van de router.

Routering naar andere componenten

Nadat u uw router in uw toepassing hebt ingesteld, moet u doorgaan met het maken van uw app-componenten, deze routeren en renderen. De volgende code importeert en maakt componenten met de naam "Home", "Over" en "Blog". Het importeert ook de Route En Routes elementen van reactie-router-dom.

U definieert uw routes binnen de app bestanddeel:

importeren { Routes, Route } van'reageren-router-dom';
importeren Thuis van'./Thuis';
importeren Over van'./Over';
importeren bloggen van'./Blog';
functieapp() {
opbrengst (

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


exporterenstandaard App;

De app component is de hoofdcomponent die alle code weergeeft die u in uw andere componenten hebt geschreven.

De Routes element is het bovenliggende element dat de individuele routes omsluit die u in uw app-component maakt. De Route element creëert een enkele route. Er zijn twee attributen van de prop nodig: a pad en een element.

De pad attribuut definieert het URL-pad van de beoogde component. De eerste route in het bovenstaande codeblok gebruikt een backslash (/) als pad. Dit is een speciale route die React als eerste zal renderen, dus de Thuis component wordt weergegeven wanneer u uw toepassing uitvoert. Verwar dit systeem niet met voorwaardelijke weergave implementeren in uw React-componenten. Je kunt dit geven pad ken elke gewenste naam toe.

De element attribuut definieert het onderdeel dat het Route zal renderen.

De koppeling component is een React Router-component die wordt gebruikt om verschillende routes te navigeren. Deze componenten hebben toegang tot de verschillende routes die u hebt gemaakt.

Bijvoorbeeld:

importeren { Koppeling } van'reageren-router-dom';
functieThuis() {
opbrengst (




'/over'>Over pagina</Link>
'/blog'>Blogpagina</Link>
Dit is de startpagina
 </div>
 )
}


exporterenstandaard Thuis;

De koppeling component is bijna identiek aan de HTML-ankertag, gebruikt het gewoon een attribuut met de naam "to" in plaats van "href". De koppeling component navigeert naar de route met de overeenkomstige padnaam als attribuut en geeft de component van de route weer.

Geneste routering en hoe deze te implementeren

De React Router ondersteunt geneste routering, waardoor u meerdere routes in één enkele route kunt verpakken. Dit wordt voornamelijk gebruikt wanneer er enige overeenkomst is in de URL-paden van de Routes.

Nadat u de componenten hebt gemaakt die u wilt routeren, ontwikkelt u individuele routes voor elk van hen in de app bestanddeel.

Bijvoorbeeld:

importeren { Routes, Route } van'reageren-router-dom'; 
importeren Lidwoord van'./Lidwoord';
importeren Nieuw artikel van'./Nieuw artikel';
importeren ArtikelEen van'./ArtikelEen';
functieapp() {
opbrengst (

'/artikel' element={ }/>
'/artikel/nieuw' element={ }/>
'/Artikel 1' element={ }/>
 </Routes>
 )
}
exporterenstandaard App;

Het bovenstaande codeblok importeert en routeert de gemaakte componenten Lidwoord, Nieuw artikel, En ArtikelEen. Er zijn enkele overeenkomsten in de URL-paden tussen de drie routes.

De Nieuw artikel De padnaam van de route begint hetzelfde als de Lidwoord De padnaam van de route, met een backslash (/) en het woord "new", d.w.z. (/new). Het enige verschil tussen de padnamen van de Lidwoord Route en de ArtikelEen Route is de schuine streep (/1) aan het einde van de ArtikelEen padnaam van de component.

Je kunt de drie routes nesten in plaats van ze in hun huidige staat te laten.

Zoals zo:

importeren { Routes, Route } van'reageren-router-dom';
importeren Lidwoord van'./Lidwoord';
importeren Nieuw artikel van'./Nieuw artikel';
importeren ArtikelEen van'./ArtikelEen';
functieapp() {
opbrengst (

'/artikel'>
 }/>
'/artikel/nieuw' element={ }/>
'/Artikel 1' element={ }/>
 </Route>
 </Routes>
 )
}
exporterenstandaard App;

Je hebt de drie afzonderlijke Routes in één pakket verpakt Route element. Merk op dat de ouder Route element heeft alleen de pad attribuut en nee element attribuut dat de te renderen component definieert. De inhoudsopgave attribuut bij het eerste kind Route element geeft aan dat dit Route wordt weergegeven wanneer u naar het URL-pad van de ouder navigeert Route.

Om uw code beter en beter onderhoudbaar te maken, moet u uw routes in een component definiëren en deze importeren in het app onderdeel voor gebruik.

Bijvoorbeeld:

importeren { Routes, Route } van'reageren-router-dom';
importeren Lidwoord van'./Lidwoord';
importeren Nieuw artikel van'./Nieuw artikel';
importeren ArtikelEen van'./ArtikelEen';
functieArtikelRoutes() {
opbrengst (

 }/>
'/artikel/nieuw' element={ }/>
'/Artikel 1' element={ }/>
 </Routes>
 )
}
exporterenstandaard ArtikelRoutes;

De component in het bovenstaande codeblok bevat de geneste routes die voorheen in de app-component zaten. Nadat u de component hebt gemaakt, moet u deze importeren in het app component en routeer het met behulp van een single Route element.

Bijvoorbeeld:

importeren { Routes, Route } van'reageren-router-dom';
importeren ArtikelRoutes van'./ArtikelRoutes';
functieapp() {
opbrengst (

'/artikel/*' element={ }>
 </Routes>
 )
}
exporterenstandaard App;

In de finale Route component zorgen de toegevoegde backslash en asterisk-symbolen aan het einde van de padnaam van de route ervoor dat de padnaam overeenkomt met elke padnaam die begint met (/artikel).

Er is meer om op de router te reageren

U zou nu bekend moeten zijn met de basisprincipes van het bouwen van single-page applicaties in React.js, met behulp van React Router.

Er zijn veel meer functies beschikbaar in de React Router-bibliotheek die de ontwikkelaarservaring dynamischer maken bij het bouwen van webapplicaties.