Solvita: elŝutu react router dom

La ĉefa problemo rilate al elŝuto de React Router DOM estas, ke ĝi povas esti malfacile agordi kaj agordi. React Router DOM postulas multan agordon kaj aranĝon, kio povas esti tempopostula kaj kompleksa por programistoj kiuj estas novaj en la biblioteko. Aldone, React Router DOM konstante evoluas, do programistoj devas resti ĝisdatigitaj kun la plej nova versio por certigi kongruecon kun siaj aplikoj.

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

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

1. "importu { BrowserRouter kiel Router, Route } de 'react-router-dom';" – Ĉi tiu linio importas la komponantojn BrowserRouter kaj Route el la biblioteko react-router-dom.

2. “ReactDOM.render(” – Ĉi tiu linio nomas la ReactDOM-regigan metodon por redoni React-elementon en la DOM en la provizita ujo kaj redoni referencon al la komponanto (aŭ redonas nulan por sennaciaj komponantoj).

3. "” – Ĉi tio estas malferma etikedo por Router-komponento, kiu estos uzata por envolvi ĉiujn niajn itinerojn por provizi enrutigan funkcion por nia aplikaĵo.

4. "” – Ĉi tio estas malferma etikedo por Itinera komponanto, kiu estos uzata por difini ununuran itineron ene de nia aplikaĵo, kiu kongruos kun ĉiuj petoj faritaj ĉe '/'.

5. "” – Ĉi tio estas memfermebla etikedo, kiu transdonas App-komponenton en nian DOM-arbon kiam ĉi tiu itinero estas egalita de reakcia enkursigilo dom.
La App-komponento povas esti iu ajn React Component, kiun ni difinis aliloke en nia kodbazo aŭ importita de alia biblioteko aŭ pako kiel Material UI aŭ Bootstrap ktp...

6. “” – Ĉi tio estas ferma etikedo por la Itinera Komponento, kiu estis malfermita sur linio 4 supre, ĝi fermas ĉi tiun apartan itinero-difinon por ke aliaj itineroj estu aldonitaj se necese poste en nia kodbazo sen tuŝi ĉi tiun funkcion aŭ konduton. .

7. “” – Ĉi tio estas ferma etikedo por la Enkursigilo, kiu estis malfermita sur la linio 3 supre, ĝi fermas ĉi tiun apartan difinon de enkursigilo por ke aliaj enkursigiloj estu aldonitaj se necese poste en nia kodbazo sen tuŝi ĉi tiun funkcion aŭ konduton. ..

8."document.getElementById('radiko'));" – Fine, ni transdonas la dokumenton getElementById('radiko') kiel argumenton al ReactDOM-a bildiga metodo, kiu diras al ĝi kie precize ni volas munti/prezenti la apon ene de la DOM-arbo (ĉi-kaze ene de elemento kun id=" radiko”).

pako react-router-dom

React Router estas populara vojiga biblioteko por React. Ĝi provizas potencan, facile uzeblan API por administri aplikajn itinerojn kaj navigadon. La pako react-router-dom estas la oficiala versio de React Router por TTT-aplikoj. Ĝi provizas komponantojn kiel ekzemple kaj por helpi administri vojigon en via programo. Ĝi ankaŭ inkluzivas hokojn kiel useHistory, useLocation kaj useParams por aliri la informojn de la nuna itinero de ene de viaj komponantoj. Kun react-router-dom vi povas facile krei dinamikajn itinerojn bazitajn sur URL-parametroj, demandaj ĉenoj aŭ eĉ laŭmenda logiko. Vi ankaŭ povas krei nestitajn itinerojn kun dinamikaj segmentoj por doni pli granulan kontrolon super la navigada strukturo de via aplikaĵo.

kiel elŝuti reagi router dom Kodo Ekzemplo

1. Instalu React Router Dom:
En via projekta dosierujo, rulu la sekvan komandon por instali React Router Dom:
`npm instali react-router-dom`

2. Importu React Router Dom:
Post kiam vi instalis React Router Dom, vi povas importi ĝin en vian projekton per la sekva kodo:
`importu { BrowserRouter kiel Router, Route } de 'react-router-dom'`

3. Kreu Itineran Komponon:
Poste, kreu itineran komponanton, kiu redonos la paĝon kiam uzanto vizitas la specifitan vojon. Ekzemple, se vi volas bildigi paĝon kiam iu vizitas /hejmon en via aplikaĵo, vi povas uzi la jenan kodon:
``

4. Envolvu Vian Apon kun Enkursigilo:
Fine, envolvu vian apon per la enkursigilo por ke ĉiuj viaj itineroj estu korekte prezentitaj. Vi povas fari tion uzante la jenan kodon en via radika dosiero (kutime index.js): ` `.