Zgjidhur: reagojnë router dom npm

Problemi kryesor në lidhje me React Router DOM është se mund të jetë i vështirë për të korrigjuar gabimet. Për shkak se rutimi trajtohet nga React Router, mund të jetë e vështirë të përcaktohet saktësisht se ku po ndodh një problem. Për më tepër, meqenëse React Router DOM përdor JavaScript për rrugëtimin e tij, çdo gabim në kod mund të shkaktojë sjellje të papritur dhe ta bëjë korrigjimin edhe më të vështirë. Së fundi, nëse një përdorues ka të instaluar një version më të vjetër të React Router DOM, ai mund të ketë probleme me përputhshmërinë me versionet më të reja të bibliotekës.

import { BrowserRouter as Router, Route } from "react-router-dom";

<Router>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

1. “importoni { BrowserRouter si Router, Route } nga 'react-router-dom';"
Kjo linjë importon komponentët BrowserRouter dhe Route nga biblioteka react-router-dom.

2. '"
Kjo linjë krijon një komponent Router që do të përdoret për të mbështjellë të gjitha rrugët në aplikacion.

3. '"
Kjo linjë krijon një komponent Route që do të japë komponentin Home kur shtegu është '/'. Mbështetja 'e saktë' siguron që kjo rrugë do të përputhet vetëm kur shtegu është saktësisht '/'.

4. '” Kjo linjë krijon një komponent Route që do të japë komponentin Rreth kur shtegu është '/about'.

5. "" Kjo linjë mbyll komponentin Router dhe sinjalizon React se të gjitha rrugët tona janë deklaruar.

menaxher i paketave npm

NPM (Node Package Manager) është një menaxher paketash për JavaScript që i ndihmon zhvilluesit të instalojnë, përditësojnë dhe menaxhojnë me lehtësi paketat për aplikacionet e tyre React. Është menaxheri i parazgjedhur i paketave për bibliotekën React Router dhe ofron akses në një gamë të gjerë paketash që mund të përdoren në aplikacionet React. NPM u lejon zhvilluesve të gjejnë dhe instalojnë shpejt paketat nga regjistri zyrtar, si dhe nga burime të tjera të palëve të treta. Ai gjithashtu ofron mjete për menaxhimin e varësive midis paketave të ndryshme, gjë që e bën më të lehtë mbajtjen e shënimeve se cilat versione të secilës paketë janë instaluar në një aplikacion. Për më tepër, NPM mund të përdoret për të përditësuar lehtësisht paketat ekzistuese ose edhe për t'i çinstaluar ato nëse nuk nevojiten më.

Çfarë është react router dom

React Router DOM është një bibliotekë rrugëtimi për React që lejon zhvilluesit të krijojnë dhe menaxhojnë rrugët brenda aplikacioneve të tyre React. Ai ofron një mënyrë për të hartuar në mënyrë deklarative rrugët tek komponentët, për të menaxhuar historinë e shfletuesit dhe për të mbajtur ndërfaqen e përdoruesit në sinkron me URL-në. Ai gjithashtu përfshin veçori të tilla si përputhja dinamike e rrugës, trajtimi i tranzicionit të vendndodhjes dhe gjenerimi i URL-ve.

Si të instaloni ruterin Dom npm react

1. Instaloni React Router:
Së pari, instaloni paketën React Router duke përdorur npm ose fije.
Për shembull, nëse jeni duke përdorur npm:
npm instaloni react-router-dom

2. Importoni ruterin React:
Pasi të përfundojë instalimi, duhet të importoni komponentët nga react-router-dom në aplikacionin tuaj. Për shembull:
importoni { BrowserRouter as Router, Route } nga 'react-router-dom';

3. Mbështillni aplikacionin tuaj në një komponent ruteri:
Hapi tjetër është të mbështillni komponentin tuaj rrënjë me a komponent nga react-router-dom. Kjo do t'i sigurojë aplikacionit tuaj aftësitë e rrugëzimit dhe do ta bëjë atë të vetëdijshëm për shtegun aktual të URL-së që përdoruesi po viziton. Për shembull:

Const App = () => (
 
 

    );

4. Shtoni rrugët në aplikacionin tuaj: Hapi i fundit është të shtoni rrugë në aplikacionin tuaj duke përdorur komponent i siguruar nga react router dom. Komponenti i rrugës merr dy mbështetëse; shteg dhe komponent i cili ju lejon të specifikoni se cilët komponentë duhet të jepen kur një përdorues viziton një shteg të caktuar URL në aplikacionin tuaj Për shembull:

Const App = () => (
 
 

   )