Isonjululwe: Khuphela i-router react dom

Ingxaki ephambili enxulumene nokukhuphela i-React Router DOM kukuba kunokuba nzima ukuyiqwalasela kunye nokuseta. I-React Router DOM ifuna uqwalaselo oluninzi kunye nokuseta, olunokuthi lutye ixesha kwaye lubenzima kubaphuhlisi abatsha kwithala leencwadi. Ukongeza, i-React Router DOM ihlala ivela, ke abaphuhlisi kufuneka bahlale benolwazi ngenguqulelo yamva nje ukuze baqinisekise ukuhambelana nezicelo zabo.

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

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

1. “Ngenisa ngaphandle {IbrowserRouter njengeNdlela, iNdlela } isuka kwi-'react-router-dom';” -Lo mgca ungenisa i-BrowserRouter kunye nezinto zeNdlela kwilayibrari ye-react-router-dom.

2. “I-ReactDOM.render (” – Lo mgca ubiza i-ReactDOM render indlela yokunikezela i-React element kwi-DOM kwisiqulathi esibonelelweyo kwaye ubuyisele ireferensi yecandelo (okanye ubuyisela i-null kumacandelo angenammiselo).

3 "U”- Le yithegi yokuvula icandelo le-Router eya kusetyenziswa ukusonga zonke iindlela zethu ukuze kubonelelwe ngokusebenza kwendlela kwisicelo sethu.

4 "U” – Le yithegi yokuvula icandelo leNdlela eya kusetyenziswa ukuchaza indlela enye kwisicelo sethu eya kungqamana naziphi na izicelo ezenziwe ku-'/'.

5 "U”- Le yithegi yokuzivala eyenza icandelo le-App kumthi wethu we-DOM xa le ndlela ihambelana ne-react router dom.
Icandelo le-App linokuba yiyo nayiphi na iNgxelo ye-React esiyichazile kwenye indawo kwi-codebase yethu okanye ingeniswe kwelinye ithala leencwadi okanye iphakheji efana ne-UI yeMathiriyeli okanye i-Bootstrap njl.

6. “” – Le yithegi yokuvala iCandelo leNdlela eyavulwa kumgca we-4 ngasentla, ivala le nkcazo yendlela ethile ukuze zongezwe ezinye iindlela xa zifuneka kamva kwi-codebase yethu ngaphandle kokuchaphazela ukusebenza okanye ukuziphatha kwalo. .

7. "" - Le yithegi yokuvala iNgxelo ye-Router eyavulwa kumgca we-3 apha ngasentla, ivala le nkcazo ye-router ethile ukwenzela ukuba ezinye ii-routers zifakwe xa zifuneka kamva kwi-codebase yethu ngaphandle kokuchaphazela ukusebenza okanye ukuziphatha kwalo. ..

8.”document.getElementById('root'));” – Okokugqibela, sidlula kuxwebhu getElementById('root') njengengxoxo kwiReactDOM render method esixelela apho kanye kanye sifuna ukunyusela/ukunikezela usetyenziso ngaphakathi komthi weDOM (kule meko ingaphakathi kwento ene id=” ingcambu").

i-react-router-dom package

IReact Router lithala leencwadi elidumileyo leReact. Ibonelela nge-API enamandla, elula ukuyisebenzisa yokulawula iindlela zesicelo kunye nokuhamba. Iphakheji ye-react-router-dom yinguqulelo esemthethweni yeReact Router yezicelo zewebhu. Inika amacandelo afana kwaye ukunceda ukulawula indlela kwi-app yakho. Ikwabandakanya iigwegwe ezinje ngeUseHistory, useLocation, kunye nokusetyenziswa kweParams ukufikelela kulwazi lwendlela yangoku ngaphakathi kumacandelo akho. Nge-react-router-dom unokwenza ngokulula iindlela eziguquguqukayo ezisekwe kwiiparamitha ze-URL, imitya yombuzo, okanye ingqiqo yesiko. Unokwenza iindlela ezibekwe kwindlwane enamacandelo aguqukayo ukunika ulawulo lwegranular ngaphezulu kolwakhiwo lokukhangela lwesicelo sakho.

indlela yokukhuphela react umzila dom Code Umzekelo

1. Faka iReact Router Dom:
Kuluhlu lweprojekthi yakho, sebenzisa lo myalelo ulandelayo ukufaka iReact Router Dom:
`npm faka i-react-router-dom`

2.Ngenisa iReact Router Dom:
Nje ukuba uyifakile iReact Router Dom, ungayingenisa kwiprojekthi yakho ngale khowudi ilandelayo:
`ngenisa ngaphandle {IbrowserRouter njengeNdlela, iNdlela} ukusuka 'kwi-react-router-dom''

3. Yenza iCandelo leNdlela:
Okulandelayo, yenza icandelo lendlela eliza kunikezela ngephepha xa umsebenzisi etyelela indlela ekhankanyiweyo. Umzekelo, ukuba ufuna ukunikezela ngephepha xa umntu endwendwela / ekhaya kwisicelo sakho, ungasebenzisa le khowudi ilandelayo:
``

4. Gquba i-App yakho ngeNdlela yeNdlela:
Okokugqibela, songela i-app yakho kunye necandelo le-router ukuze zonke iindlela zakho zinikezelwe ngokuchanekileyo. Ungakwenza oku ngokusebenzisa le khowudi ilandelayo kwingcambu yefayile yakho (ngesiqhelo index.js): ` `.