A React Router fonallal kapcsolatos fő probléma az, hogy nehéz lehet helyesen konfigurálni. Sok beállítást és konfigurálást igényel, és ha helytelenül történik, váratlan viselkedéshez vagy hibákhoz vezethet. Ezenkívül a React Router fonal dokumentációja nem mindig világos vagy naprakész, ami megnehezíti a fejlesztők számára a problémák hibaelhárítását.
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. Ez a sor importálja a BrowserRouter, Route és Link összetevőket a react-router-dom könyvtárból:
import { BrowserRouter as Router, Route, Link } innen: „react-router-dom”;
2. Ez a sor a teljes alkalmazást egy Router komponensbe csomagolja az útválasztási funkciók biztosítása érdekében:
3. Ez a div elem azoknak a hivatkozásoknak a listáját tartalmazza, amelyek a különböző útvonalak közötti navigáláshoz használhatók:
- Kezdőlap
- Rólunk
- Témakörök
4. Ez a hr elem vizuális elválasztóként szolgál a navigációs hivatkozások és az útvonal tartalma között:
5. Ezek a sorok három különböző útvonalat határoznak meg az alkalmazásunk számára a React Router Route komponensével:
6. Végül ez a záró div címke lezárja az alkalmazásburkoló div elemünket:
mi az a React Router
A React Router a React útválasztási könyvtára, amely lehetővé teszi a fejlesztők számára, hogy útvonalakat hozzanak létre és kezeljenek a React alkalmazásaikon belül. Módot biztosít az útvonalak komponensekhez való deklaratív leképezésére, az URL-paraméterek kezelésére és a navigációs események kezelésére. Olyan funkciókat is biztosít, mint a dinamikus útvonalillesztés, a helyátmenetek kezelése és a görgetés helyreállítása.
Mi az a fonal
A Yarn a JavaScript csomagkezelője, amely segít a fejlesztőknek a függőségek hatékonyabb és biztonságosabb kezelésében. A React Router csomagok telepítésére, frissítésére és konfigurálására használja. A Yarn abban is segít a fejlesztőknek, hogy nyomon kövessék projektjük függőségeit, biztosítva, hogy minden szükséges csomag telepítve legyen és naprakész legyen. Ez megkönnyíti a több fejlesztővel végzett projektek munkáját, mivel mindegyik könnyen ellenőrizheti, hogy a csomagok mely verzióit kell használniuk.
