Išspręsta: react router dom npm

Pagrindinė problema, susijusi su React Router DOM, yra ta, kad gali būti sunku derinti. Kadangi maršrutą tvarko „React Router“, gali būti sunku tiksliai nustatyti, kur iškyla problema. Be to, kadangi „React Router DOM“ maršrutizavimui naudoja „JavaScript“, bet kokios kodo klaidos gali sukelti netikėtą elgesį ir dar labiau apsunkinti derinimą. Galiausiai, jei vartotojas yra įdiegęs senesnę React Router DOM versiją, gali kilti suderinamumo su naujesnėmis bibliotekos versijomis problemų.

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

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

1. „importuoti { BrowserRouter as Router, Route } iš 'react-router-dom';“
Ši eilutė importuoja BrowserRouter ir Route komponentus iš react-router-dom bibliotekos.

2. ""
Ši eilutė sukuria maršrutizatoriaus komponentą, kuris bus naudojamas apvynioti visus programos maršrutus.

3. ""
Ši eilutė sukuria maršruto komponentą, kuris pateiks pagrindinį komponentą, kai kelias yra „/“. „Tikslus“ pasiūlymas užtikrina, kad šis maršrutas bus suderintas tik tada, kai kelias yra tiksliai „/“.

4. "” Ši eilutė sukuria maršruto komponentą, kuris pateiks komponentą Apie, kai kelias yra „/apie“.

5. "" Ši eilutė uždaro maršrutizatoriaus komponentą ir signalizuoja Reaguoti, kad visi mūsų maršrutai buvo paskelbti.

npm paketų tvarkyklė

NPM (Node Package Manager) yra „JavaScript“ paketų tvarkyklė, padedanti kūrėjams lengvai įdiegti, atnaujinti ir valdyti „React“ programų paketus. Tai yra numatytoji „React Router“ bibliotekos paketų tvarkyklė ir suteikia prieigą prie daugybės paketų, kuriuos galima naudoti „React“ programose. NPM leidžia kūrėjams greitai rasti ir įdiegti paketus iš oficialaus registro ir kitų trečiųjų šalių šaltinių. Jame taip pat pateikiami įrankiai, skirti valdyti skirtingų paketų priklausomybes, todėl lengviau sekti, kurios kiekvieno paketo versijos įdiegtos programoje. Be to, NPM galima naudoti norint lengvai atnaujinti esamus paketus arba net juos pašalinti, jei jie nebereikalingi.

Kas yra react router dom

„React Router“ DOM yra „React“ maršruto parinkimo biblioteka, leidžianti kūrėjams kurti ir valdyti maršrutus savo „React“ programose. Tai suteikia galimybę deklaratyviai susieti maršrutus su komponentais, tvarkyti naršyklės istoriją ir sinchronizuoti vartotojo sąsają su URL. Tai taip pat apima tokias funkcijas kaip dinaminis maršruto atitikimas, vietos perėjimo tvarkymas ir URL generavimas.

Kaip įdiegti dom npm react maršrutizatorių

1. Įdiekite „React Router“:
Pirmiausia įdiekite „React Router“ paketą naudodami npm arba verpalą.
Pavyzdžiui, jei naudojate npm:
npm įdiegti react-router-dom

2. Importuoti React maršrutizatorių:
Baigę diegti, turite importuoti komponentus iš „react-router-dom“ į programą. Pavyzdžiui:
importuoti { BrowserRouter as Router, Route } iš 'react-router-dom';

3. Įdėkite programą į maršruto parinktuvo komponentą:
Kitas žingsnis yra apvynioti šakninį komponentą su a komponentas iš react-router-dom. Tai suteiks jūsų programai maršruto parinkimo galimybes ir sužinos apie dabartinį URL kelią, kuriame lankosi vartotojas. Pavyzdžiui:

const App = () => (
 
 

    );

4. Maršrutų įtraukimas į savo programą: paskutinis veiksmas yra pridėti maršrutus prie programos naudojant komponentas, kurį teikia react maršrutizatorius dom. Maršruto komponentas užima du rekvizitus; kelias ir komponentas, leidžiantis nurodyti, kurie komponentai turi būti pateikti, kai vartotojas apsilanko tam tikrame jūsų programos URL kelyje. Pavyzdžiui:

const App = () => (
 
 

   )