Glavna težava v zvezi s prejo React Router je, da jo je lahko težko pravilno konfigurirati. Zahteva veliko nastavitev in konfiguracije, in če je izvedeno nepravilno, lahko povzroči nepričakovano vedenje ali napake. Poleg tega dokumentacija za prejo React Router ni vedno jasna ali posodobljena, kar razvijalcem otežuje odpravljanje težav.
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. Ta vrstica uvozi komponente BrowserRouter, Route in Link iz knjižnice react-router-dom:
uvoz { BrowserRouter kot usmerjevalnik, pot, povezava } iz »react-router-dom«;
2. Ta vrstica ovije celotno aplikacijo v komponento usmerjevalnika, da zagotovi funkcionalnost usmerjanja:
3. Ta element div vsebuje seznam povezav, ki bodo uporabljene za krmarjenje med različnimi potmi:
- Domov
- O meni
- Teme
4. Ta element hr se uporablja kot vizualno ločilo med navigacijskimi povezavami in vsebino poti:
5. Te vrstice definirajo tri različne poti za našo aplikacijo z uporabo komponente Route React Routerja:
6. Končno ta zaključna oznaka div zapre naš element div ovojnice aplikacije:
kaj je React Router
React Router je usmerjevalna knjižnica za React, ki razvijalcem omogoča ustvarjanje in upravljanje poti znotraj njihovih aplikacij React. Zagotavlja način za deklarativno preslikavo poti do komponent, obravnavanje parametrov URL in upravljanje dogodkov navigacije. Zagotavlja tudi funkcije, kot so dinamično ujemanje poti, obravnava prehoda lokacije in obnovitev drsenja.
Kaj je preja
Yarn je upravitelj paketov za JavaScript, ki razvijalcem pomaga upravljati svoje odvisnosti na učinkovitejši in varnejši način. React Router ga uporablja za namestitev, posodobitev in konfiguracijo paketov. Yarn tudi pomaga razvijalcem slediti odvisnostim njihovih projektov in zagotavlja, da so vsi potrebni paketi nameščeni in posodobljeni. To olajša delo na projektih z več razvijalci, saj lahko vsak preprosto preveri, katere različice paketov potrebuje.
