Išspręsta: atsisiųskite react maršrutizatorių dom

Pagrindinė problema, susijusi su React Router DOM atsisiuntimu, yra ta, kad ją gali būti sunku konfigūruoti ir nustatyti. React Router DOM reikalauja daug konfigūracijos ir sąrankos, o tai gali užtrukti daug laiko ir būti sudėtinga kūrėjams, kurie pradeda naudotis biblioteka. Be to, „React Router DOM“ nuolat tobulėja, todėl kūrėjai turi nuolat atnaujinti naujausią versiją, kad užtikrintų suderinamumą su savo programomis.

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

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

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

2. „ReactDOM.render(“ – ši eilutė iškviečia ReactDOM atvaizdavimo metodą, kad „React“ elementas būtų pateiktas pateiktame konteineryje esančiame DOM ir grąžintų nuorodą į komponentą (arba grąžina nulį komponentams be būsenos).

3. "” – tai pradinė maršruto parinktuvo komponento žyma, kuri bus naudojama apvynioti visus mūsų maršrutus, kad mūsų programai būtų teikiamos maršruto parinkimo funkcijos.

4. "” – tai pradinė maršruto komponento žyma, kuri bus naudojama apibrėžti vieną maršrutą mūsų programoje, kuris atitiks visas užklausas, pateiktas adresu „/“.

5. "” – tai savaime užsidaranti žyma, kuri programos komponentą pateikia mūsų DOM medyje, kai šį maršrutą atitinka react router dom.
Programos komponentas gali būti bet koks „React“ komponentas, kurį apibrėžėme kitur savo kodų bazėje arba importavome iš kitos bibliotekos ar paketo, pvz., „Material UI“ arba „Bootstrap“ ir pan.

6. "" – tai Maršruto komponento, kuris buvo atidarytas 4 eilutėje aukščiau, uždarymo žyma, ji uždaro šį konkretų maršruto apibrėžimą, kad vėliau mūsų kodų bazėje būtų galima pridėti kitų maršrutų, jei reikės, nepažeidžiant šio komponento funkcionalumo ar elgesio. .

7. "" – tai maršruto parinktuvo komponento, kuris buvo atidarytas 3 eilutėje aukščiau, uždarymo žyma, ji uždaro šį konkretų maršrutizatoriaus apibrėžimą, kad vėliau į mūsų kodų bazę būtų galima įtraukti kitus maršruto parinktuvus, nedarant įtakos šio komponento funkcijoms ar elgesiui. ..

8."document.getElementById('root'));" – Galiausiai pateikiame dokumentą getElementById('root') kaip argumentą ReactDOM pateikimo metodui, kuris nurodo, kur tiksliai norime prijungti / pateikti programą DOM medžio viduje (šiuo atveju elemento su id= viduje). šaknis“).

React-router-dom paketą

„React Router“ yra populiari „React“ maršruto parinkimo biblioteka. Tai suteikia galingą, lengvai naudojamą API, skirtą programų maršrutams ir navigacijai valdyti. React-router-dom paketas yra oficiali React Router versija, skirta žiniatinklio programoms. Jame pateikiami tokie komponentai kaip ir padėti valdyti maršrutą programoje. Jame taip pat yra kabliukų, pvz., „useHistory“, „useLocation“ ir „useParams“, kad pasiektumėte dabartinio maršruto informaciją iš jūsų komponentų. Naudodami react-router-dom galite lengvai sukurti dinaminius maršrutus, pagrįstus URL parametrais, užklausos eilutėmis ar net pasirinkta logika. Taip pat galite kurti įdėtus maršrutus su dinaminiais segmentais, kad galėtumėte tiksliau valdyti programos naršymo struktūrą.

Kaip atsisiųsti react maršrutizatoriaus dom kodo pavyzdį

1. Įdiekite „React Router Dom“:
Savo projekto kataloge paleiskite šią komandą, kad įdiegtumėte React Router Dom:
„npm install react-router-dom“.

2. Importuoti „React Router Dom“:
Įdiegę „React Router Dom“, galite importuoti jį į savo projektą naudodami šį kodą:
`importuoti { BrowserRouter as Router, Route } from 'react-router-dom'

3. Sukurkite maršruto komponentą:
Tada sukurkite maršruto komponentą, kuris pateiks puslapį, kai vartotojas apsilankys nurodytu keliu. Pavyzdžiui, jei norite pateikti puslapį, kai kas nors jūsų programoje apsilanko /home, galite naudoti šį kodą:
``

4. Apvyniokite programą su maršruto parinktuvo komponentu:
Galiausiai apvyniokite programą maršrutizatoriaus komponentu, kad visi maršrutai būtų pateikti teisingai. Tai galite padaryti naudodami šį kodą savo šakniniame faile (dažniausiai index.js): ` `.