Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

A Single Page Application (SPA) er en nettside eller nettapplikasjon som dynamisk omskriver en eksisterende nettside med ny informasjon fra webserveren.

I en React-applikasjon henter komponenter nettstedinnhold og gjengir det til en enkelt HTML-fil i prosjektet ditt.

React Router hjelper deg med å navigere til komponenten du ønsker og gjengir den i HTML-filen. For å bruke den, må du vite hvordan du setter opp og integrerer React Router med din React-applikasjon.

Hvordan installere React Router

For å installere React Router i ditt React-prosjekt ved å bruke npm, JavaScript-pakkebehandleren, kjør følgende kommando i prosjektkatalogen din:

npm jeg reagerer-ruter-dom

Alternativt kan du laste ned pakken ved å bruke Yarn, en pakkebehandling som lar deg installere bibliotekpakker offline.

For å installere React Router ved hjelp av Yarn, kjør denne kommandoen:

instagram viewer
garn legg til react-router-dom@6

Sette opp React Router

For å konfigurere React Router og gjøre den tilgjengelig i applikasjonen din, importer Nettleserruter fra reager-ruter-dom inne i din index.js fil, og pakk deretter inn appkomponenten i Nettleserruter element:

import Reagere fra'reagere';
import ReactDOM fra'reager-dom/klient';
import App fra'./App';
import { BrowserRouter } fra'reager-ruter-dom';

konst root = ReactDOM.createRoot( dokument.getElementById('rot') );

root.render(


</BrowserRouter>
);

Pakke inn app-komponenten i Nettleserruter element gir hele appen full tilgang til ruterens evner.

Ruting til andre komponenter

Etter å ha satt opp ruteren i applikasjonen din, bør du gå videre og lage appkomponentene dine, rute dem og gjengi dem. Følgende kode importerer og lager komponenter kalt "Hjem", "Om" og "Blogg". Den importerer også Rute og Ruter elementer fra reager-ruter-dom.

Du vil definere dine ruter inne i App komponent:

import { Ruter, rute } fra'reager-ruter-dom';
import Hjem fra'./Hjem';
import Om fra'./Om';
import Blogg fra'./Blogg';

funksjonApp() {
komme tilbake (

'/' element={ } />
'/Om' element={ } />
'/blogg' element={ }/>
</Routes>
)
}

eksportmisligholde App;

De App komponent er hovedkomponenten som gjengir all koden du har skrevet i de andre komponentene dine.

De Ruter element er det overordnede elementet som omslutter de individuelle rutene du oppretter i appkomponenten din. De Rute element oppretter en enkelt rute. Det krever to prop-attributter: a sti og en element.

De sti attributt definerer URL-banen til den tiltenkte komponenten. Den første ruten i kodeblokken ovenfor bruker en omvendt skråstrek (/) som sin bane. Dette er en spesiell rute som React vil gjengi først, så Hjem komponent gjengis når du kjører applikasjonen. Ikke forveksle dette systemet med implementere betinget gjengivelse i React-komponentene dine. Du kan gi dette sti gi et hvilket som helst navn du liker.

De element attributt definerer komponenten som Rute vil gjengi.

De link komponent er en React Router-komponent som brukes til å navigere i forskjellige ruter. Disse komponentene får tilgang til de forskjellige rutene du har opprettet.

For eksempel:

import { Link } fra'reager-ruter-dom';

funksjonHjem() {
komme tilbake (


'/Om'>Om side</Link>
'/blogg'>Bloggside</Link>

Dette er Hjemmesiden
</div>
)
}

eksportmisligholde Hjem;

De link komponenten er nesten identisk med HTML-ankerkoden, den bruker bare et attributt kalt "to" i stedet for "href". De link komponenten navigerer til ruten med det tilsvarende banenavnet som attributt og gjengir rutens komponent.

Nestet ruting og hvordan den implementeres

React Router støtter nestet ruting, slik at du kan pakke flere ruter inn i en enkelt rute. Dette brukes hovedsakelig når det er en viss likhet i URL-banene til rutene.

Når du har opprettet komponentene du ønsker å rute, vil du utvikle individuelle ruter for hver av dem i app komponent.

For eksempel:

import { Ruter, rute } fra'reager-ruter-dom'; 
import Artikler fra'./Artikler';
import Ny artikkel fra'./NewArticle';
import Artikkel 1 fra'./ArtikelOne';

funksjonApp() {
komme tilbake (

'/artikkel' element={ }/>
'/artikkel/ny' element={ }/>
'/Artikkel 1' element={ }/>
</Routes>
)
}

eksportmisligholde App;

Kodeblokken ovenfor importerer og ruter de opprettede komponentene Artikler, Ny artikkel, og Artikkel 1. Det er noen likheter i URL-banene mellom de tre rutene.

De Ny artikkel Rutens stinavn starter det samme som Artikler Rutens banenavn, med en ekstra skråstrek (/) og ordet "ny", dvs. (/new). Den eneste forskjellen mellom banenavnene til Artikler Ruten og Artikkel 1 Rute er skråstreken (/1) på slutten av Artikkel 1 komponentens banenavn.

Du kan hekke de tre rutene i stedet for å la dem være i gjeldende tilstand.

Som så:

import { Ruter, rute } fra'reager-ruter-dom';
import Artikler fra'./Artikler';
import Ny artikkel fra'./NewArticle';
import Artikkel 1 fra'./ArtikelOne';

funksjonApp() {
komme tilbake (

'/artikkel'>
}/>
'/artikkel/ny' element={ }/>
'/Artikkel 1' element={ }/>
</Route>
</Routes>
)
}

eksportmisligholde App;

Du har pakket de tre individuelle rutene i en enkelt Rute element. Merk at forelderen Rute elementet har bare sti attributt og nr element attributt som definerer komponenten som skal gjengis. De indeks egenskap hos det første barnet Rute element angir at dette Rute gjengis når du navigerer til URL-banen til den overordnede Rute.

For å gjøre koden din bedre og mer vedlikeholdbar, bør du definere rutene dine i en komponent og importere den til app komponent for bruk.

For eksempel:

import { Ruter, rute } fra'reager-ruter-dom';
import Artikler fra'./Artikler';
import Ny artikkel fra'./NewArticle';
import Artikkel 1 fra'./ArtikelOne';

funksjonArtikkelruter() {
komme tilbake (

}/>
'/artikkel/ny' element={ }/>
'/Artikkel 1' element={ }/>
</Routes>
)
}

eksportmisligholde Artikkelruter;

Komponenten i kodeblokken ovenfor inneholder de nestede rutene som tidligere var i appkomponenten. Etter å ha opprettet komponenten, bør du importere den til app komponent og rute den ved hjelp av en enkelt Rute element.

For eksempel:

import { Ruter, rute } fra'reager-ruter-dom';
import Artikkelruter fra'./ArticleRoutes';

funksjonApp() {
komme tilbake (

'/artikkel/*' element={ }>
</Routes>
)
}

eksportmisligholde App;

I finalen Rute komponent, de tilføyde omvendte skråstrekene og stjernesymbolene på slutten av rutens banenavn sikrer at banenavnet tilsvarer et hvilket som helst banenavn som begynner med (/artikkel).

Det er mer å reagere på ruteren

Du bør nå være kjent med det grunnleggende om hvordan du bygger enkeltsideapplikasjoner i React.js ved å bruke React Router.

Det er mange flere funksjoner tilgjengelig i React Router-biblioteket som gjør utvikleropplevelsen mer dynamisk når den bygger webapplikasjoner.