Ratkaistu: reagoi reititin dom npm

Suurin React Router DOM:iin liittyvä ongelma on, että virheenkorjaus voi olla vaikeaa. Koska React Router hoitaa reitityksen, voi olla vaikeaa määrittää tarkalleen, missä ongelma esiintyy. Lisäksi, koska React Router DOM käyttää JavaScriptiä reitityksessään, kaikki koodin virheet voivat aiheuttaa odottamatonta toimintaa ja tehdä virheenkorjauksesta entistä vaikeampaa. Lopuksi, jos käyttäjällä on vanhempi versio React Router DOM:sta asennettuna, hän voi kohdata yhteensopivuusongelmia kirjaston uudempien versioiden kanssa.

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

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

1. "tuo { BrowserRouter as Router, Route } from 'react-router-dom';"
Tämä rivi tuo BrowserRouter- ja Route-komponentit react-router-dom-kirjastosta.

2. ""
Tämä rivi luo reititinkomponentin, jota käytetään käärimään kaikki sovelluksen reitit.

3. ""
Tämä rivi luo Route-komponentin, joka hahmontaa Home-komponentin, kun polku on '/'. "Tarkka"-ehdotus varmistaa, että tämä reitti yhdistetään vain, kun polku on täsmälleen "/".

4. "” Tämä rivi luo Reittikomponentin, joka hahmontaa Tietoja-komponentin, kun polku on '/about'.

5. "" Tämä rivi sulkee Router-komponentin ja ilmoittaa Reactille, että kaikki reitit on ilmoitettu.

npm paketinhallinta

NPM (Node Package Manager) on JavaScriptin paketinhallinta, jonka avulla kehittäjät voivat helposti asentaa, päivittää ja hallita React-sovellustensa paketteja. Se on React Router -kirjaston oletuspakettien hallinta ja tarjoaa pääsyn laajaan valikoimaan paketteja, joita voidaan käyttää React-sovelluksissa. NPM:n avulla kehittäjät voivat nopeasti löytää ja asentaa paketteja virallisesta rekisteristä sekä muista kolmannen osapuolen lähteistä. Se tarjoaa myös työkaluja eri pakettien välisten riippuvuuksien hallintaan, mikä helpottaa kunkin paketin versioiden seuraamista sovellukseen asennettuna. Lisäksi NPM:n avulla voidaan helposti päivittää olemassa olevia paketteja tai jopa poistaa niitä, jos niitä ei enää tarvita.

Mikä on react router dom

React Router DOM on Reactin reitityskirjasto, jonka avulla kehittäjät voivat luoda ja hallita reittejä React-sovelluksissaan. Se tarjoaa tavan kartoittaa deklaratiivisesti reitit komponentteihin, hallita selaimen historiaa ja pitää käyttöliittymä synkronoituna URL-osoitteen kanssa. Se sisältää myös ominaisuuksia, kuten dynaamisen reittisovituksen, sijainnin siirtymän käsittelyn ja URL-osoitteen luomisen.

Kuinka asentaa Dom npm react -reititin

1. Asenna React Router:
Asenna ensin React Router -paketti npm:n tai langan avulla.
Jos esimerkiksi käytät npm:tä:
npm install react-router-dom

2. Tuo React-reititin:
Kun asennus on valmis, sinun on tuotava komponentit react-router-domista sovellukseesi. Esimerkiksi:
tuo { BrowserRouter as Router, Route } kohteesta 'react-router-dom';

3. Kääri sovelluksesi reititinkomponenttiin:
Seuraava vaihe on kääri juurikomponentti a:lla komponentti osoitteesta react-router-dom. Tämä antaa sovelluksellesi reititysominaisuudet ja saa sen tietoiseksi nykyisestä URL-polusta, jolla käyttäjä vierailee. Esimerkiksi:

const App = () => (
 
 

    );

4. Lisää reittejä sovellukseesi: Viimeinen vaihe on lisätä reittejä sovellukseesi käyttämällä komponentti, jonka tarjoaa react router dom. Reittikomponentti ottaa kaksi rekvisiittaa; polku ja komponentti, jonka avulla voit määrittää, mitkä komponentit hahmonnetaan, kun käyttäjä vierailee tietyllä URL-polulla sovelluksessasi. Esimerkki:

const App = () => (
 
 

   )