React Routeri lõngaga seotud peamine probleem on see, et seda võib olla keeruline õigesti konfigureerida. See nõuab palju häälestamist ja konfigureerimist ning kui seda tehakse valesti, võib see põhjustada ootamatut käitumist või tõrkeid. Lisaks ei ole React Routeri lõnga dokumentatsioon alati selge ega ajakohane, mistõttu on arendajatel probleemide tõrkeotsing keeruline.
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. See rida impordib react-ruuter-dom teegist komponendid BrowserRouter, Route ja Link:
importida { BrowserRouter as Router, Route, Link } jaotisest "react-router-dom";
2. See rida mähib kogu rakenduse ruuteri komponendiks, et pakkuda marsruutimisfunktsioone:
3. See element div sisaldab linkide loendit, mida kasutatakse erinevate marsruutide vahel navigeerimiseks:
- Avaleht
- MEIST
- Teemasid
4. Seda hr-elementi kasutatakse visuaalse eraldajana navigatsioonilinkide ja marsruudi sisu vahel:
5. Need read määratlevad meie rakenduse jaoks kolm erinevat marsruuti, kasutades React Routeri marsruudi komponenti:
6. Lõpuks sulgeb see sulgev div-märgend meie rakenduse ümbrise div-elemendi:
mis on React Router
React Router on Reacti marsruutimisteek, mis võimaldab arendajatel oma Reacti rakendustes marsruute luua ja hallata. See annab võimaluse marsruutide deklaratiivseks kaardistamiseks komponentidega, URL-i parameetrite haldamiseks ja navigeerimissündmuste haldamiseks. See pakub ka selliseid funktsioone nagu dünaamiline marsruudi sobitamine, asukoha ülemineku käsitlemine ja kerimise taastamine.
Mis on lõng
Yarn on JavaScripti paketihaldur, mis aitab arendajatel oma sõltuvusi tõhusamalt ja turvalisemalt hallata. React Router kasutab seda pakettide installimiseks, värskendamiseks ja konfigureerimiseks. Lõng aitab ka arendajatel jälgida oma projekti sõltuvusi, tagades, et kõik vajalikud paketid on installitud ja ajakohased. See muudab mitme arendajaga projektide kallal töötamise lihtsamaks, kuna igaüks saab hõlpsasti kontrollida, milliseid pakettide versioone nad vajavad.
