A Single Page Application (SPA) är en webbplats eller webbapplikation som dynamiskt skriver om en befintlig webbsida med ny information från webbservern.
I en React-applikation hämtar komponenter webbplatsinnehåll och renderar det till en enda HTML-fil i ditt projekt.
React Router hjälper dig att navigera till den komponent du väljer och renderar den i HTML-filen. För att använda den behöver du veta hur du ställer in och integrerar React Router med din React-applikation.
Hur man installerar React Router
För att installera React Router i ditt React-projekt med hjälp av npm, JavaScript-pakethanteraren, kör följande kommando i din projektkatalog:
npm i reager-router-dom
Alternativt kan du ladda ner paketet med Yarn, en pakethanterare som låter dig installera bibliotekspaket offline.
För att installera React Router med Yarn, kör detta kommando:
garn add react-router-dom@6
Konfigurera React Router
För att konfigurera React Router och göra den tillgänglig i din applikation, importera BrowserRouter från reagera-router-dom inuti din index.js fil och slå sedan in din appkomponent i BrowserRouter element:
importera Reagera från'reagera';
importera ReactDOM från'reagera-dom/klient';
importera App från'./App';
importera { BrowserRouter } från"reagera-router-dom";konst root = ReactDOM.createRoot( dokumentera.getElementById('rot') );
root.render(
</BrowserRouter>
);
Slå in appkomponenten i BrowserRouter element ger hela appen full tillgång till routerns förmågor.
Routing till andra komponenter
När du har ställt in din router i din applikation bör du gå vidare och skapa dina appkomponenter, dirigera dem och rendera dem. Följande kod importerar och skapar komponenter som heter "Hem", "Om" och "Blogg". Den importerar också Rutt och Rutter element från reagera-router-dom.
Du kommer att definiera dina rutter inuti App komponent:
importera { Rutter, rutt } från"reagera-router-dom";
importera Hem från'./Hem';
importera Handla om från'./Handla om';
importera Blogg från'./Blogg';fungeraApp() {
lämna tillbaka (
'/' element={ } />
'/handla om' element={ } />
'/blogg' element={ }/>
</Routes>
)
}
exporterastandard App;
De App component är huvudkomponenten som återger all kod du har skrivit i dina andra komponenter.
De Rutter element är det överordnade elementet som omsluter de individuella rutter du skapar i din appkomponent. De Rutt element skapar en enda rutt. Det krävs två prop-attribut: a väg och en element.
De väg attribut definierar URL-sökvägen för den avsedda komponenten. Den första rutten i kodblocket ovan använder ett snedstreck (/) som sin väg. Detta är en speciell rutt som React kommer att rendera först, så Hem komponent återges när du kör din applikation. Förväxla inte detta system med implementera villkorlig rendering i dina React-komponenter. Du kan ge detta väg ge vilket namn du vill.
De element attribut definierar den komponent som Rutt kommer att återge.
De länk komponent är en React Router-komponent som används för att navigera olika rutter. Dessa komponenter kommer åt de olika rutter du har skapat.
Till exempel:
importera { Länk } från"reagera-router-dom";fungeraHem() {
lämna tillbaka (
'/handla om'>Om sidan</Link>
'/blogg'>Bloggsida</Link>Detta är Hemsidan
</div>
)
}
exporterastandard Hem;
De länk komponenten är nästan identisk med HTML-ankartaggen, den använder bara ett attribut som heter "to" istället för "href". De länk komponenten navigerar till rutten med motsvarande sökvägsnamn som dess attribut och återger ruttens komponent.
Kapslad routing och hur man implementerar den
React Router stöder kapslad routing, så att du kan slå in flera rutter till en enda rutt. Detta används främst när det finns en viss likhet i URL-vägarna för rutterna.
När du har skapat de komponenter du vill dirigera kommer du att utveckla individuella rutter för var och en av dem i app komponent.
Till exempel:
importera { Rutter, rutt } från"reagera-router-dom";
importera Artiklar från'./Artiklar';
importera Ny artikel från'./NewArticle';
importera Artikel Ett från'./ArticleOne';fungeraApp() {
lämna tillbaka ('/artikel' element={ }/> '/artikel/ny' element={ }/> '/Artikel 1' element={ }/>
</Routes>
)
}
exporterastandard App;
Kodblocket ovan importerar och dirigerar de skapade komponenterna Artiklar, Ny artikel, och Artikel Ett. Det finns vissa likheter i URL-vägarna mellan de tre vägarna.
De Ny artikel Ruttens sökvägsnamn börjar på samma sätt som Artiklar Ruttens sökvägsnamn, med ett extra snedstreck (/) och ordet "new", dvs (/new). Den enda skillnaden mellan sökvägsnamnen för Artiklar Rutten och Artikel Ett Rutten är snedstrecket (/1) i slutet av Artikel Ett komponentens sökvägsnamn.
Du kan kapsla de tre rutterna istället för att lämna dem i deras nuvarande tillstånd.
Såhär:
importera { Rutter, rutt } från"reagera-router-dom";
importera Artiklar från'./Artiklar';
importera Ny artikel från'./NewArticle';
importera Artikel Ett från'./ArticleOne';fungeraApp() {
lämna tillbaka ('/artikel'>
}/>'/artikel/ny' element={ }/> '/Artikel 1' element={ }/>
</Route>
</Routes>
)
}
exporterastandard App;
Du har lagt de tre individuella rutterna i en singel Rutt element. Observera att föräldern Rutt element har bara väg attribut och nr element attribut som definierar komponenten som ska renderas. De index attribut i det första barnet Rutt element anger att detta Rutt återges när du navigerar till den överordnade webbadressen Rutt.
För att göra din kod bättre och mer underhållbar bör du definiera dina rutter i en komponent och importera den till app komponent för användning.
Till exempel:
importera { Rutter, rutt } från"reagera-router-dom";
importera Artiklar från'./Artiklar';
importera Ny artikel från'./NewArticle';
importera Artikel Ett från'./ArticleOne';fungeraArtikelvägar() {
lämna tillbaka (
}/>'/artikel/ny' element={ }/> '/Artikel 1' element={ }/>
</Routes>
)
}
exporterastandard ArtikelRutter;
Komponenten i kodblocket ovan innehåller de kapslade rutter som tidigare fanns i appkomponenten. När du har skapat komponenten bör du importera den till app komponent och dirigera den med en singel Rutt element.
Till exempel:
importera { Rutter, rutt } från"reagera-router-dom";
importera Artikelvägar från'./ArticleRoutes';fungeraApp() {
lämna tillbaka ('/artikel/*' element={ }>
</Routes>
)
}
exporterastandard App;
I finalen Rutt komponent, de tillagda snedstrecket och asterisksymbolerna i slutet av ruttens sökvägsnamn säkerställer att sökvägsnamnet motsvarar alla sökvägsnamn som börjar med (/artikel).
Det finns mer att reagera Router
Du bör nu vara bekant med grunderna i hur man bygger ensidiga applikationer i React.js med hjälp av React Router.
Det finns många fler funktioner tillgängliga i React Router-biblioteket som gör utvecklarens upplevelse mer dynamisk när man bygger webbapplikationer.
