Kuxazululiwe: landa i-react router dom

Inkinga enkulu ehlobene nokulanda i-React Router DOM ukuthi kungaba nzima ukuyilungisa nokuyimisa. I-React Router DOM idinga ukucushwa nokusetha okuningi, okungadla isikhathi futhi kube nzima kubathuthukisi abasha kulabhulali. Ukwengeza, i-React Router DOM ihlezi ivela, ngakho onjiniyela kufanele bahlale benolwazi lwakamuva ngenguqulo yakamuva ukuze baqinisekise ukuhambisana nezinhlelo zabo zokusebenza.

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

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

1. “ngenisa i-{ BrowserRouter as Router, Route } from 'react-router-dom';” – Lo mugqa ungenisa kwamanye amazwe izingxenye ze-BrowserRouter kanye ne-Route kumtapo wezincwadi we-react-router-dom.

2. “I-ReactDOM.render(” – Lo mugqa ubiza indlela yokunikeza ye-ReactDOM ukuze inikeze isici se-React ku-DOM esitsheni esihlinzekiwe futhi ibuyisele ireferensi yengxenye (noma ibuyisela i-null yezingxenye ezingenamthetho).

I-3 "” - Lona umaka wokuvula wengxenye Yerutha ezosetshenziswa ukusonga yonke imizila yethu ukuze kuhlinzekwe ukusebenza kwemizila yohlelo lwethu lokusebenza.

I-4 "” – Lona umaka wokuvula wengxenye yomzila ezosetshenziswa ukuchaza umzila owodwa phakathi kwesicelo sethu ozofana nanoma yiziphi izicelo ezenziwe kokuthi '/'.

I-5 "” – Lona umaka wokuzivalela onikeza ingxenye yohlelo lokusebenza esihlahleni sethu se-DOM uma lo mzila ufaniswe ne-react router dom.
Ingxenye yohlelo lokusebenza ingaba yinoma iyiphi i-React Component esiyichaze kwenye indawo ku-codebase yethu noma ingeniswe isuka komunye umtapo wezincwadi noma iphakheji efana ne-Material UI noma i-Bootstrap njll...

6. “” – Lona umaka wokuvala weNgxenye Yomzila owavulwa kulayini wesi-4 ngenhla, uvala le ncazelo ethile yomzila ukuze kwengezwe eminye imizila uma kudingeka kamuva ku-codebase yethu ngaphandle kokuphazamisa ukusebenza noma ukuziphatha kwayo. .

7. “” – Lona umaka wokuvala weNgxenye Ye-Router evulwe kulayini 3 ngenhla, ivala le ncazelo ethile yerutha ukuze kwengezwe amanye amarutha uma kudingeka kamuva ku-codebase yethu ngaphandle kokuthinta ukusebenza noma ukuziphatha kwalo. ..

8.”document.getElementById('root'));" – Okokugcina, sidlulisa idokhumenti i-getElementById('root') njengengxabano ye-ReactDOM enikeza indlela esitshela ukuthi sifuna ukukhweza/sikhiphe uhlelo lokusebenza ngaphakathi kwesihlahla se-DOM (kulokhu kungaphakathi kwento ene-id=” impande").

iphakheji ye-react-router-dom

I-React Router iwumtapo womzila odumile we-React. Ihlinzeka nge-API enamandla, esebenziseka kalula yokuphatha imizila yohlelo lokusebenza nokuzulazula. Iphakheji ye-react-router-dom inguqulo esemthethweni ye-React Router yezinhlelo zokusebenza zewebhu. Inikeza izingxenye ezifana futhi ukusiza ukuphatha umzila kuhlelo lwakho lokusebenza. Kufaka phakathi izingwegwe ezifana ne-useHistory, useLocation, kanye ne-useParams ukuze ufinyelele ulwazi lomzila wamanje ngaphakathi kwezingxenye zakho. Nge-react-router-dom ungakwazi kalula ukudala imizila eguquguqukayo esekelwe kumingcele ye-URL, iyunithi yezinhlamvu zemibuzo, noma ngisho nokucabanga okungokwezifiso. Ungaphinda udale imizila ebekwe esidlekeni enamasegimenti aguquguqukayo ukuze unikeze ulawulo oluyimbudumbudu ngaphezulu kwesakhiwo sokuzulazula sohlelo lwakho lokusebenza.

indlela yokulanda react router dom Ikhodi Isibonelo

1. Faka i-React Router Dom:
Kuhla lwemibhalo yephrojekthi yakho, sebenzisa umyalo olandelayo ukuze ufake i-React Router Dom:
`npm faka i-react-router-dom`

2. Ngenisa i-React Router Dom:
Uma usuyifakile i-React Router Dom, ungayingenisa kuphrojekthi yakho ngekhodi elandelayo:
`ngenisa { BrowserRouter as Router, Route } from 'react-router-dom'`

3. Dala Ingxenye Yomzila:
Okulandelayo, dala ingxenye yomzila ezonikeza ikhasi lapho umsebenzisi evakashela indlela eshiwo. Isibonelo, uma ufuna ukunikeza ikhasi lapho othile evakashela/ekhaya kuhlelo lwakho lokusebenza, ungasebenzisa ikhodi elandelayo:
``

4. Goqa uhlelo lwakho lokusebenza nge-Router Component:
Okokugcina, bopha uhlelo lwakho lokusebenza ngengxenye yerutha ukuze yonke imizila yakho inikezwe ngendlela efanele. Ungakwenza lokhu ngokusebenzisa ikhodi elandelayo kufayela lakho eliyimpande (imvamisa i-index.js): ` `.