Atrisināts: reaģēt maršrutētājs dom npm

Galvenā problēma, kas saistīta ar React Router DOM, ir tā, ka to var būt grūti atkļūdot. Tā kā maršrutēšanu apstrādā React Router, var būt grūti precīzi noteikt, kur rodas problēma. Turklāt, tā kā React Router DOM maršrutēšanai izmanto JavaScript, visas koda kļūdas var izraisīt neparedzētu darbību un padarīt atkļūdošanu vēl grūtāku. Visbeidzot, ja lietotājam ir instalēta vecāka React Router DOM versija, viņam var rasties saderības problēmas ar jaunākām bibliotēkas versijām.

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

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

1. “importēt { BrowserRouter as Router, Route } from 'react-router-dom';”
Šī rinda importē komponentus BrowserRouter un Route no react-router-dom bibliotēkas.

2. ""
Šajā rindā tiek izveidots maršrutētāja komponents, kas tiks izmantots, lai aplauztu visus lietojumprogrammas maršrutus.

3. ""
Šajā rindā tiek izveidots maršruta komponents, kas atveidos komponentu Sākums, ja ceļš ir “/”. “Precīzs” piedāvājums nodrošina, ka šis maršruts tiks saskaņots tikai tad, ja ceļš ir precīzi “/”.

4. "” Šajā rindā tiek izveidots maršruta komponents, kas atveidos komponentu Par, kad ceļš ir '/about'.

5. “” Šī rinda aizver maršrutētāja komponentu un signalizē React, ka visi mūsu maršruti ir deklarēti.

npm pakotņu pārvaldnieks

NPM (Node Package Manager) ir JavaScript pakotņu pārvaldnieks, kas palīdz izstrādātājiem viegli instalēt, atjaunināt un pārvaldīt React lietojumprogrammu pakotnes. Tas ir noklusējuma pakotņu pārvaldnieks React Router bibliotēkai un nodrošina piekļuvi plašam pakotņu klāstam, ko var izmantot React lietojumprogrammās. NPM ļauj izstrādātājiem ātri atrast un instalēt pakotnes no oficiālā reģistra, kā arī citiem trešo pušu avotiem. Tas nodrošina arī rīkus dažādu pakotņu atkarību pārvaldībai, kas ļauj vieglāk izsekot, kuras katras pakotnes versijas ir instalētas lietojumprogrammā. Turklāt NPM var izmantot, lai viegli atjauninātu esošās pakotnes vai pat tās atinstalētu, ja tās vairs nav vajadzīgas.

Kas ir reaģēt maršrutētāja dom

React Router DOM ir React maršrutēšanas bibliotēka, kas ļauj izstrādātājiem izveidot un pārvaldīt maršrutus savās React lietojumprogrammās. Tas nodrošina veidu, kā deklaratīvi kartēt maršrutus ar komponentiem, pārvaldīt pārlūkprogrammas vēsturi un nodrošināt lietotāja interfeisa sinhronizāciju ar URL. Tas ietver arī tādas funkcijas kā dinamiska maršruta saskaņošana, atrašanās vietas pārejas apstrāde un URL ģenerēšana.

Kā instalēt Dom npm react maršrutētāju

1. Instalējiet React maršrutētāju:
Vispirms instalējiet React Router pakotni, izmantojot npm vai dziju.
Piemēram, ja izmantojat npm:
npm instalējiet react-router-dom

2. Importējiet React maršrutētāju:
Kad instalēšana ir pabeigta, lietojumprogrammā ir jāimportē komponenti no react-router-dom. Piemēram:
importēt { BrowserRouter as Router, Route } no 'react-router-dom';

3. Ietiniet savu lietotni maršrutētāja komponentā:
Nākamais solis ir ietīt saknes komponentu ar a komponents no react-router-dom. Tas nodrošinās jūsu lietojumprogrammai maršrutēšanas iespējas un informēs par pašreizējo URL ceļu, kuru lietotājs apmeklē. Piemēram:

const App = () => (
 
 

    );

4. Pievienojiet savai lietotnei maršrutus: pēdējais solis ir pievienot lietojumprogrammai maršrutus, izmantojot komponents, ko nodrošina react maršrutētājs dom. Maršruta komponents aizņem divus balstus; ceļš un komponents, kas ļauj norādīt, kuri komponenti ir jāatveido, kad lietotājs apmeklē noteiktu URL ceļu jūsu lietojumprogrammā. Piemēram:

const App = () => (
 
 

   )