Det största problemet med React Router-garn är att det kan vara svårt att konfigurera korrekt. Det kräver mycket installation och konfiguration, och om det görs på fel sätt kan det leda till oväntat beteende eller fel. Dessutom är dokumentationen för React Router-garn inte alltid tydlig eller uppdaterad, vilket gör det svårt för utvecklare att felsöka problem.
add react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
1. Den här raden importerar komponenterna BrowserRouter, Route och Link från react-router-dom-biblioteket:
importera { BrowserRouter som router, rutt, länk } från "react-router-dom";
2. Den här raden omsluter hela applikationen i en routerkomponent för att tillhandahålla routingfunktionalitet:
3. Detta div-element innehåller en lista med länkar som kommer att användas för att navigera mellan olika rutter:
- Hem
- Om oss
- ämnen
4. Detta hr-element används som en visuell separator mellan navigeringslänkarna och ruttens innehåll:
5. Dessa rader definierar tre olika rutter för vår applikation med hjälp av React Routers ruttkomponent:
6. Slutligen stänger den här avslutande div-taggen vårt div-element för applikationsomslag:
vad är React Router
React Router är ett routingbibliotek för React som låter utvecklare skapa och hantera rutter inom sina React-applikationer. Det ger ett sätt att deklarativt kartlägga rutter till komponenter, hantera URL-parametrar och hantera navigeringshändelser. Den tillhandahåller också funktioner som dynamisk ruttmatchning, hantering av platsövergångar och rullningsåterställning.
Vad är garn
Yarn är en pakethanterare för JavaScript som hjälper utvecklare att hantera sina beroenden på ett mer effektivt och säkert sätt. Den används av React Router för att installera, uppdatera och konfigurera paket. Yarn hjälper också utvecklare att hålla reda på deras projekts beroenden, vilket säkerställer att alla nödvändiga paket är installerade och uppdaterade. Detta gör det lättare att arbeta med projekt med flera utvecklare eftersom var och en enkelt kan kontrollera vilka versioner av paketen de behöver använda.
