Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

En Single Page Application (SPA) er en hjemmeside eller webapplikation, der dynamisk omskriver en eksisterende webside med ny information fra webserveren.

I en React-applikation henter komponenter webstedsindhold og gengiver det til en enkelt HTML-fil i dit projekt.

React Router hjælper dig med at navigere til den ønskede komponent og gengiver den i HTML-filen. For at bruge den skal du vide, hvordan du opsætter og integrerer React Router med din React-applikation.

Sådan installeres React Router

For at installere React Router i dit React-projekt vha npm, JavaScript-pakkemanageren, kør følgende kommando i din projektmappe:

npm i reagere-router-dom

Alternativt kan du downloade pakken ved hjælp af Yarn, en pakkehåndtering, der giver dig mulighed for at installere bibliotekspakker offline.

For at installere React Router ved hjælp af Yarn, kør denne kommando:

instagram viewer 
garn tilføj react-router-dom@6

Opsætning af React Router

For at konfigurere React Router og gøre den tilgængelig i din applikation skal du importere BrowserRouter fra reagere-router-dom inde i din index.js fil, og pak derefter din app-komponent ind i BrowserRouter element:

importere Reagere fra'reagere';
importere ReactDOM fra'reager-dom/klient'; 
importere App fra'./App';
importere { BrowserRouter } fra'reager-router-dom';
konst root = ReactDOM.createRoot( dokument.getElementById('rod') );
root.render(


 </BrowserRouter>
);

Indpakning af app-komponenten i BrowserRouter element giver hele appen fuld adgang til routerens evner.

Routing til andre komponenter

Når du har konfigureret din router i din applikation, skal du gå videre og oprette dine appkomponenter, dirigere dem og gengive dem. Følgende kode importerer og opretter komponenter med navnet "Hjem", "Om" og "Blog". Den importerer også Rute og Ruter elementer fra reagere-router-dom.

Du vil definere dine ruter inde i App komponent:

importere { Ruter, rute } fra'reager-router-dom';
importere Hjem fra'./Hjem';
importere Om fra'./Om';
importere Blog fra'./Blog';
fungereApp() {
Vend tilbage (

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


eksportStandard App;

Det App komponent er hovedkomponenten, der gengiver al den kode, du har skrevet i dine andre komponenter.

Det Ruter element er det overordnede element, der omslutter de individuelle ruter, du opretter, i din app-komponent. Det Rute element opretter en enkelt rute. Det kræver to prop-attributter: a sti og en element.

Det sti attribut definerer URL-stien til den tilsigtede komponent. Den første rute i ovenstående kodeblok bruger en omvendt skråstreg (/) som sin sti. Dette er en speciel rute, som React renderer først, så den Hjem komponent gengives, når du kører din applikation. Forveksle ikke dette system med implementering af betinget gengivelse i dine React-komponenter. Du kan give dette sti tilskriv et hvilket som helst navn, du kan lide.

Det element attribut definerer den komponent, som Rute vil gengive.

Det link komponent er en React Router-komponent, der bruges til at navigere på forskellige ruter. Disse komponenter får adgang til de forskellige ruter, du har oprettet.

For eksempel:

importere { Link } fra'reager-router-dom';
fungereHjem() {
Vend tilbage (




'/om'>Om side</Link>
'/blog'>Blogside</Link>
Dette er Hjemmesiden
 </div>
 )
}


eksportStandard Hjem;

Det link komponenten er næsten identisk med HTML-ankertagget, den bruger bare en egenskab ved navn "to" i stedet for "href". Det link komponent navigerer til ruten med det tilsvarende stinavn som attribut og gengiver rutens komponent.

Nested Routing og hvordan den implementeres

React Router understøtter indlejret routing, så du kan pakke flere ruter ind i en enkelt rute. Dette bruges hovedsageligt, når der er en vis lighed i ruternes URL-stier.

Når du har oprettet de komponenter, du ønsker at rute, vil du udvikle individuelle ruter for hver af dem i app komponent.

For eksempel:

importere { Ruter, rute } fra'reager-router-dom'; 
importere Artikler fra'./Artikler';
importere Ny artikel fra'./NewArticle';
importere Artikel 1 fra'./Artikel 1';
fungereApp() {
Vend tilbage (

'/artikel' element={ }/>
'/artikel/ny' element={ }/>
'/artikel/1' element={ }/>
 </Routes>
 )
}
eksportStandard App;

Kodeblokken ovenfor importerer og dirigerer de oprettede komponenter Artikler, Ny artikel, og Artikel 1. Der er nogle ligheder i URL-stierne mellem de tre ruter.

Det Ny artikel Rutens stinavn starter det samme som Artikler Rutens stinavn med en tilføjet omvendt skråstreg (/) og ordet "ny", dvs. (/ny). Den eneste forskel mellem stinavnene på Artikler Ruten og Artikel 1 Rute er skråstreg (/1) i slutningen af Artikel 1 komponentens stinavn.

Du kan indlejre de tre ruter i stedet for at efterlade dem i deres nuværende tilstand.

Ligesom:

importere { Ruter, rute } fra'reager-router-dom';
importere Artikler fra'./Artikler';
importere Ny artikel fra'./NewArticle';
importere Artikel 1 fra'./Artikel 1';
fungereApp() {
Vend tilbage (

'/artikel'>
 }/>
'/artikel/ny' element={ }/>
'/artikel/1' element={ }/>
 </Route>
 </Routes>
 )
}
eksportStandard App;

Du har pakket de tre individuelle ruter i en enkelt Rute element. Bemærk, at forælderen Rute element har kun sti egenskab og nr element attribut, der definerer den komponent, der skal gengives. Det indeks egenskab i det første barn Rute element angiver, at dette Rute gengives, når du navigerer til den overordnede URL-sti Rute.

For at gøre din kode bedre og mere vedligeholdelsesvenlig, bør du definere dine ruter i en komponent og importere den til app komponent til brug.

For eksempel:

importere { Ruter, rute } fra'reager-router-dom';
importere Artikler fra'./Artikler';
importere Ny artikel fra'./NewArticle';
importere Artikel 1 fra'./Artikel 1';
fungereArtikelRuter() {
Vend tilbage (

 }/>
'/artikel/ny' element={ }/>
'/artikel/1' element={ }/>
 </Routes>
 )
}
eksportStandard ArtikelRuter;

Komponenten i kodeblokken ovenfor indeholder de indlejrede ruter, der tidligere var i app-komponenten. Når du har oprettet komponenten, skal du importere den til app komponent og diriger den ved hjælp af en enkelt Rute element.

For eksempel:

importere { Ruter, rute } fra'reager-router-dom';
importere ArtikelRuter fra'./ArticleRoutes';
fungereApp() {
Vend tilbage (

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

I finalen Rute komponent, de tilføjede skråstreg og stjernesymboler i slutningen af ​​rutens stinavn sikrer, at stinavnet svarer til ethvert stinavn, der begynder med (/artikel).

Der er mere at reagere Router

Du bør nu være bekendt med det grundlæggende i, hvordan man bygger enkeltside-applikationer i React.js ved hjælp af React Router.

Der er mange flere funktioner tilgængelige i React Router-biblioteket, der gør udvikleroplevelsen mere dynamisk, når den bygger webapplikationer.