Ratkaistu: lataa react router dom

Suurin React Router DOM:n lataamiseen liittyvä ongelma on, että sen määrittäminen ja käyttöönotto voi olla vaikeaa. React Router DOM vaatii paljon konfigurointia ja asennusta, mikä voi olla aikaa vievää ja monimutkaista kirjaston uusille kehittäjille. Lisäksi React Router DOM kehittyy jatkuvasti, joten kehittäjien on pysyttävä ajan tasalla uusimman version kanssa varmistaakseen yhteensopivuuden sovellusten kanssa.

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

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

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

2. "ReactDOM.render(" – Tämä rivi kutsuu ReactDOM-renderöintimenetelmää React-elementin hahmontamiseksi mukana toimitetun säilön DOM:iin ja viittauksen palauttamiseen komponenttiin (tai palauttaa nollan tilattomille komponenteille).

3. "” – Tämä on reititinkomponentin avaustunniste, jota käytetään kaikkien reittiemme käärimiseen reititystoiminnallisuuden tarjoamiseksi sovelluksellemme.

4. "” – Tämä on avaustunniste Reitti-komponentille, jota käytetään määrittämään yksittäinen reitti sovelluksessamme, joka vastaa kaikkia osoitteella '/' tehtyjä pyyntöjä.

5. "” – Tämä on itsestään sulkeutuva tagi, joka renderöi sovelluskomponentin DOM-puuhun, kun react router dom vastaa tähän reittiin.
Sovelluskomponentti voi olla mikä tahansa React-komponentti, jonka olemme määrittäneet muualla koodikannassamme tai tuoneet toisesta kirjastosta tai paketista, kuten Material UI tai Bootstrap jne.

6. "" – Tämä on rivillä 4 avatun reittikomponentin sulkeva tagi, joka sulkee tämän tietyn reitin määrittelyn, jotta muita reittejä voidaan lisätä tarvittaessa myöhemmin koodikantaamme vaikuttamatta tämän toimintoon tai käyttäytymiseen. .

7. "" – Tämä on rivillä 3 avatun Router Componentin sulkeva tunniste, joka sulkee tämän tietyn reitittimen määritelmän, jotta muita reitittimiä voidaan lisätä tarvittaessa myöhemmin koodikantaamme vaikuttamatta tämän toimintoon tai käyttäytymiseen. ..

8."document.getElementById('root'));" – Lopuksi välitämme dokumentin getElementById('root') argumenttina ReactDOM-renderöintimenetelmälle, joka kertoo sille, mihin tarkalleen haluamme liittää/renderöidä sovelluksen DOM-puun sisällä (tässä tapauksessa elementin sisällä, jonka id=) juuri").

react-router-dom-paketti

React Router on suosittu Reactin reitityskirjasto. Se tarjoaa tehokkaan, helppokäyttöisen API:n sovellusreittien ja navigoinnin hallintaan. React-router-dom-paketti on React Routerin virallinen versio verkkosovelluksille. Se tarjoaa komponentteja, kuten ja auttaa hallitsemaan reititystä sovelluksessasi. Se sisältää myös koukut, kuten useHistory, useLocation ja useParams, joiden avulla voit käyttää nykyisen reitin tietoja komponenteistasi. React-router-domilla voit helposti luoda dynaamisia reittejä URL-parametrien, kyselymerkkijonojen tai jopa mukautetun logiikan perusteella. Voit myös luoda sisäkkäisiä reittejä dynaamisilla segmenteillä, jotta voit hallita tarkemmin sovelluksesi navigointirakennetta.

kuinka ladata react reititin dom Code Esimerkki

1. Asenna React Router Dom:
Asenna React Router Dom suorittamalla projektihakemistossa seuraava komento:
`npm install react-router-dom`

2. Tuo React Router Dom:
Kun olet asentanut React Router Domin, voit tuoda sen projektiisi seuraavalla koodilla:
`tuo { BrowserRouter as Router, Route } from "react-router-dom"

3. Luo reittikomponentti:
Luo seuraavaksi reittikomponentti, joka hahmontaa sivun, kun käyttäjä vierailee määritetyllä polulla. Jos esimerkiksi haluat renderöidä sivun, kun joku vierailee sovelluksesi osoitteessa /home, voit käyttää seuraavaa koodia:
``

4. Kääri sovelluksesi reititinkomponenttiin:
Lopuksi kääri sovelluksesi reititinkomponenttiin, jotta kaikki reitit hahmonnetaan oikein. Voit tehdä tämän käyttämällä seuraavaa koodia juuritiedostossasi (yleensä index.js): ` `.