Glavni problem vezan za React Router pređu je to što može biti teško ispravno konfigurirati. Zahtijeva mnogo podešavanja i konfiguracije, a ako se radi pogrešno, može dovesti do neočekivanog ponašanja ili grešaka. Dodatno, dokumentacija za React Router yarn nije uvijek jasna ili ažurna, što otežava programerima da riješe probleme.
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. Ova linija uvozi komponente BrowserRouter, Route i Link iz biblioteke react-router-dom:
import { BrowserRouter as Router, Route, Link } iz “react-router-dom”;
2. Ova linija umotava cijelu aplikaciju u komponentu rutera kako bi se pružila funkcionalnost usmjeravanja:
3. Ovaj div element sadrži listu veza koje će se koristiti za navigaciju između različitih ruta:
- Početna
- Oko
- Teme
4. Ovaj hr element se koristi kao vizualni razdjelnik između navigacijskih veza i sadržaja rute:
5. Ove linije definiraju tri različite rute za našu aplikaciju koristeći React Router komponentu Route:
6. Konačno, ova završna div oznaka zatvara naš div element omotača aplikacije:
šta je React Router
React Router je biblioteka rutiranja za React koja omogućava programerima da kreiraju i upravljaju rutama unutar svojih React aplikacija. Pruža način za deklarativno mapiranje ruta do komponenti, rukovanje URL parametrima i upravljanje događajima navigacije. Također pruža značajke kao što su dinamičko podudaranje ruta, rukovanje prijelazom lokacije i vraćanje skrolovanja.
Šta je Yarn
Yarn je menadžer paketa za JavaScript koji pomaže programerima da upravljaju svojim zavisnostima na efikasniji i sigurniji način. Koristi ga React Router za instaliranje, ažuriranje i konfigurisanje paketa. Yarn također pomaže programerima da prate ovisnosti svog projekta, osiguravajući da su svi potrebni paketi instalirani i ažurirani. To olakšava rad na projektima s više programera jer svaki od njih može lako provjeriti koje verzije paketa treba da koristi.
