Lahendatud: laadige alla react ruuter dom

React Router DOM-i allalaadimisega seotud peamine probleem on see, et selle konfigureerimine ja seadistamine võib olla keeruline. React Router DOM nõuab palju konfigureerimist ja seadistamist, mis võib olla aeganõudev ja keeruline arendajatele, kes pole teegis uued. Lisaks areneb React Router DOM pidevalt, nii et arendajad peavad oma rakendustega ühilduvuse tagamiseks olema uusima versiooniga kursis.

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

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

1. "import { BrowserRouter as Router, Route } from 'react-router-dom';" – See rida impordib komponendid BrowserRouter ja Route teegist react-ruuter-dom.

2. "ReactDOM.render(" – see rida kutsub ReactDOM-i renderdamismeetodit React-elemendi renderdamiseks kaasasolevas konteineris olevas DOM-is ja tagastab viite komponendile (või tagastab nulli olekuta komponentide puhul).

3. "” – see on ruuteri komponendi avasilt, mida kasutatakse kõigi meie marsruutide mähkimiseks, et pakkuda meie rakendusele marsruutimise funktsiooni.

4. "” – See on marsruudi komponendi avamärgend, mida kasutatakse meie rakenduses ühe marsruudi määratlemiseks, mis ühtib kõigi aadressil „/” tehtud päringutega.

5. "” – see on isesulguv silt, mis renderdab rakenduse komponendi meie DOM-puusse, kui sellele marsruudile vastab react-ruuteri dom.
Rakenduse komponent võib olla mis tahes Reacti komponent, mille oleme oma koodibaasis mujal määratlenud või impordinud mõnest teisest teegist või paketist, näiteks materjali kasutajaliidesest või alglaadimisest jne.

6. "" – see on marsruudi komponendi sulgemissilt, mis avati ülal real 4, see sulgeb selle konkreetse marsruudi definitsiooni, nii et vajadusel saab hiljem meie koodibaasi lisada teisi marsruute, ilma et see mõjutaks selle funktsionaalsust või käitumist. .

7. "" – see on ruuteri komponendi sulgemismärgend, mis avati ülaltoodud real 3. See sulgeb selle konkreetse ruuteri definitsiooni, nii et vajadusel saab hiljem meie koodibaasi lisada teisi ruutereid, ilma et see mõjutaks selle funktsionaalsust või käitumist. ..

8.”document.getElementById('root'));” – Lõpuks edastame dokumendi getElementById('root') argumendina ReactDOM-i renderdusmeetodile, mis ütleb sellele, kuhu täpselt tahame DOM-puu sees rakenduse ühendada/renderdada (antud juhul elemendi sees, millel on id=” juur”).

React-ruuter-dom pakett

React Router on Reacti populaarne marsruutimisteek. See pakub võimsat ja hõlpsasti kasutatavat API-d rakenduste marsruutide ja navigeerimise haldamiseks. Pakett react-router-dom on React Routeri ametlik versioon veebirakenduste jaoks. See pakub selliseid komponente nagu ja et aidata hallata teie rakenduses marsruutimist. See sisaldab ka konkse, nagu useHistory, useLocation ja useParams, et pääseda juurde praeguse marsruudi teabele teie komponentide sees. Funktsiooniga react-router-dom saate hõlpsasti luua dünaamilisi marsruute, mis põhinevad URL-i parameetritel, päringustringidel või isegi kohandatud loogikal. Samuti saate luua dünaamiliste segmentidega pesastatud marsruute, et pakkuda täpsemat kontrolli oma rakenduse navigeerimisstruktuuri üle.

kuidas alla laadida react ruuteri dom koodi näide

1. Installige React Router Dom:
React Router Domi installimiseks käivitage oma projektikataloogis järgmine käsk:
"npm install react-ruuter-dom".

2. Impordi React Router Dom:
Kui olete React Router Domi installinud, saate selle oma projekti importida järgmise koodiga:
`import { BrowserRouter as Router, Route } from 'react-router-dom'

3. Looge marsruudi komponent:
Järgmisena looge marsruudikomponent, mis renderdab lehe, kui kasutaja külastab määratud teed. Näiteks kui soovite lehe renderdada, kui keegi külastab teie rakenduses aadressi /home, saate kasutada järgmist koodi:
``

4. Pakkige oma rakendus ruuteri komponendiga:
Lõpuks mähkige oma rakendus ruuteri komponendiga nii, et kõik teie marsruudid renderdataks õigesti. Seda saate teha, kasutades juurfailis (tavaliselt index.js) järgmist koodi: ` `.