Yakagadziriswa: react router dom npm

Dambudziko guru rine chekuita neReact Router DOM nderekuti zvinogona kunetsa kugadzirisa. Nekuti iyo nzira inobatwa neReact Router, zvinogona kuve zvakaoma kudoma chaizvo pari kuitika nyaya. Pamusoro pezvo, sezvo React Router DOM inoshandisa JavaScript kune yayo nzira, chero kukanganisa mukodhi kunogona kukonzera maitiro asingatarisirwe uye kuita kuti kugadzirisa zvinyanye kuoma. Chekupedzisira, kana mushandisi aine yekare vhezheni yeReact Router DOM yakaiswa, vanogona kusangana nenyaya dzekuenderana neshanduro itsva dzeraibhurari.

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

<Router>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

1. "import {BrowserRouter as Router, Route } kubva 'react-router-dom';"
Mutsetse uyu unopinza BrowserRouter uye Route zvikamu kubva kune react-router-dom raibhurari.

2. ""
Mutsetse uyu unogadzira chikamu cheRouter chinozoshandiswa kuputira nzira dzese mukushandisa.

3. ""
Mutsetse uyu unogadzira chikamu cheNzira chinozopa chikamu cheKumba kana nzira iri '/'. Iyo 'chaiyo' prop inovimbisa kuti nzira iyi inongoenderana chete kana nzira yacho yakanyatso '/'.

4. "” Mutsetse uyu unogadzira chikamu cheNzira chinozopa chikamu che About kana nzira yave '/ about'.

5. "" Mutsetse uyu unovhara chikamu cheRouter uye unoratidza React kuti nzira dzedu dzese dzakaziviswa.

npm package maneja

NPM (Node Package Maneja) maneja wepakeji yeJavaScript inobatsira vanogadzira kuisa, kugadzirisa, uye kubata mapakeji eReact application yavo. Ndiyo yakasarudzika pasuru maneja yeReact Router raibhurari uye inopa mukana kune dzakasiyana siyana mapakeji anogona kushandiswa muReact application. NPM inobvumira vanogadzira kuti vakurumidze kutsvaga uye kuisa mapakeji kubva kune yepamutemo registry pamwe nemamwe echitatu-bato masosi. Inopawo maturusi ekugadzirisa kutsamira pakati pemapakeji akasiyana, izvo zvinoita kuti zvive nyore kuchengeta kuti ndeapi mavhezheni epakeji yega yega akaiswa mune application. Pamusoro pezvo, NPM inogona kushandiswa kugadzirisa zviri nyore mapakeji aripo kana kuabvisa kana asingachadiwi.

Chii chinonzi react router dom

React Router DOM iraibhurari yenzira yeReact iyo inobvumira vanogadzira kugadzira uye kugadzirisa nzira mukati meReact application yavo. Inopa nzira yekuzivisa mepu nzira kune zvikamu, kutonga nhoroondo yebrowser, uye chengetedza UI ichienderana neURL. Iyo inosanganisirawo maficha akadai seane simba nzira yekufananidza, nzvimbo yekushandura kubata, uye URL chizvarwa.

Maitiro ekuisa Dom npm react router

1. Isa React Router:
Kutanga, isa iyo React Router package uchishandisa npm kana shinda.
Semuenzaniso, kana uri kushandisa npm:
npm isa react-router-dom

2. Import React Router:
Kana iyo yekumisikidza yapera, iwe unofanirwa kupinza zvinhu kubva kune react-router-dom mune yako application. Semuyenzaniso:
pinza {BrowserRouter seRouter, Route} kubva 'react-router-dom';

3. Putira App Yako muchikamu cheRouter:
Nhanho inotevera ndeyekuputira mudzi wako chikamu ne chikamu kubva react-router-dom. Izvi zvinopa application yako kugona kwekufambisa uye kuita kuti izive nezve yazvino URL nzira iri kushanyirwa nemushandisi. Semuyenzaniso:

const App = () => (
 
 

    );

4. Wedzera Nzira kuApp yako: Nhanho yekupedzisira ndeyekuwedzera nzira kune yako application uchishandisa iyo chikamu chinopihwa nereact router dom. Chikamu chenzira chinotora mapuropu maviri; nzira uye chikamu chinokutendera kuti utaure kuti ndezvipi zvikamu zvinofanirwa kupihwa kana mushandisi akashanyira imwe URL nzira mune yako application Semuenzaniso:

const App = () => (
 
 

   )