La xaliyay: soo deji react router dom

Dhibaatada ugu weyn ee la xiriirta soo dejinta React Router DOM waa in ay adkaan karto in la habeeyo oo la dejiyo. React Router DOM waxay u baahan tahay habayn badan iyo habayn, kaas oo wakhti badan qaadan kara oo u adag horumariyayaasha ku cusub maktabadda. Intaa waxaa dheer, React Router DOM si joogto ah ayuu u horumarayaa, sidaa darteed horumariyayaashu waa inay la socdaan nooca ugu dambeeyay si loo hubiyo in ay la socdaan codsiyadooda.

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

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

1. "ka soo deji { BrowserRouter as Router, Route} ka 'react-router-dom';" - Khadkani waxa uu ka soo dejiyaa qaybaha BrowserRouter iyo Route maktabadda react-router-dom.

2. "ReactDOM.render("- Khadkani waxa uu ugu yeedhaa habka ReactDOM render si uu u soo celiyo element React DOM ee ku jira weelka la keenay oo uu ku soo celiyo tixraaca qaybta (ama soo celisa wax aan jirin ee qaybaha aan dal lahayn).

3. ""- Tani waa summada furitaanka ee qaybta router kaas oo loo isticmaali doono in lagu duubo dhammaan dariiqyadayada si aan u bixinno shaqeynta habaynta codsigayaga.

4. ""- Tani waa summada furitaanka qaybta marinka taasoo loo isticmaali doono in lagu qeexo hal waddo oo ku dhex jirta arjigayaga oo ku habboon codsi kasta oo lagu sameeyo '/'.

5. ""- Tani waa sumad is-xiran oo ka dhigaysa qayb App ah geedkayaga DOM marka dariiqan uu ku habboon yahay router-ka falcelinta.
Qaybta App-ka waxay noqon kartaa qayb kasta oo falcelin ah oo aan ku qeexnay meel kale oo ku taal codebase ama laga soo dejiyo maktabad kale ama xirmo sida Qalabka UI ama Bootstrap iwm…

6. “” – Tani waa summada xidhitaanka ee Qaybta Jidka ee lagu furay safka 4 ee sare, waxa ay xidhaysaa qeexida waddadan gaarka ah si dariiqyada kale loogu daro haddii loo baahdo hadhow gudaha codebase-ka iyada oo aan saamayn ku yeelanayn shaqada ama hab-dhaqanka qofkan. .

7. “” – Tani waa summada xidhitaanka ee Qaybta Router-ka ee lagu furay safka 3 ee sare, waxa ay xidhaysaa qeexitaankan gaarka ah ee router-ka si router-yada kale loogu daro haddii loo baahdo hadhow gudaha codebase-ka iyada oo aan saamayn ku yeelanayn shaqada ama hab-dhaqanka qofkan. ..

8.document.getElementById('xidid'));" - Ugu dambeyntii, waxaan ku gudbineynaa dukumeenti getElementById ('xidid') dood ahaan habka loo bixiyo ReactDOM taasoo u sheegeysa meesha saxda ah ee aan rabno inaan ku dhejino / ka bixinno app gudaha geedka DOM (kiiskan gudaha shey leh id=" xidid").

react-router-dom xirmo

React Router waa maktabad caan ah oo loogu talagalay React. Waxay siisaa API awood leh, si sahlan loo isticmaali karo si loogu maareeyo waddooyinka codsiga iyo hagidda. Xirmada react-router-dom waa nooca rasmiga ah ee React Router ee codsiyada webka. Waxay bixisaa qaybo ay ka mid yihiin iyo si aad gacan uga geysato maaraynta marinka abkaaga. Waxa kale oo ka mid ah qabsatooyinka ay ka midka yihiin isticmaalkaHistory, useLocation, and useParams si aad u hesho macluumaadka dariiqa hadda ee qaybahaaga. Iyada oo la adeegsanayo react-router-dom waxaad si fudud u abuuri kartaa wadooyin firfircoon oo ku salaysan cabbirada URL, xargaha weydiinta, ama xitaa macquulka gaarka ah. Waxa kale oo aad abuuri kartaa waddooyin buul leh oo leh qaybo firfircoon si aad u siiso koontarool mug leh oo ku saabsan qaab dhismeedka hagidda codsigaaga.

sida loo soo dejiyo react dom code Tusaale

1. Ku rakib React Router Dom:
Buugga mashruucaaga, ku socodsii amarka soo socda si aad u rakibto React Router Dom:
'npm ku rakib react-router-dom'

2. Soo dejinta React Router Dom:
Markaad rakibto React Router Dom, waxaad ku soo gelin kartaa mashruucaaga koodka soo socda:
'ka soo deji { BrowserRouter sidii Router, Route} ka 'react-router-dom''

3. Samee Qayb Jidka:
Marka xigta, samee qayb dariiqo ah oo ka dhigi doonta bogga marka isticmaaluhu uu booqdo jidka la cayimay. Tusaale ahaan, haddii aad rabto inaad samayso bog marka qof ku soo booqdo/guriga codsigaaga, waxaad isticmaali kartaa koodka soo socda:
``

4. Ku duub App-kaga Qaybaha Router:
Ugu dambeyntii, ku duub app kaaga qaybta router si dhammaan waddooyinkaaga si sax ah loogu sameeyo. Waxaad tan ku samayn kartaa adiga oo isticmaalaya koodka soo socda ee faylkaaga xididka ah (sida caadiga ah index.js): ` `.