Kuxazululiwe: sabela irutha dom npm

Inkinga enkulu ehlobene ne-React Router DOM ukuthi kungaba nzima ukuyisusa. Ngenxa yokuthi umzila uphathwa yi-React Router, kungase kube nzima ukukhomba lapho inkinga yenzeka khona. Ukwengeza, njengoba i-React Router DOM isebenzisa i-JavaScript endleleni yayo, noma imaphi amaphutha kukhodi angabangela ukuziphatha okungalindelekile futhi enze ukulungisa iphutha kube nzima nakakhulu. Okokugcina, uma umsebenzisi enenguqulo endala ye-React Router DOM efakiwe, angase ahlangabezane nezinkinga zokusebenzisana nezinguqulo ezintsha zelabhulali.

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

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

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

I-2 ""
Lo mugqa udala ingxenye Yerutha ezosetshenziswa ukugoqa yonke imizila kuhlelo lokusebenza.

I-3 ""
Lo mugqa udala ingxenye Yomzila ezonikeza ingxenye Yasekhaya uma indlela ingu-'/'. I-prop 'eqondile' iqinisekisa ukuthi lo mzila uzofaniswa kuphela uma indlela ingu-'/' ncamashi.

I-4 "” Lo mugqa udala ingxenye yomzila ezonikeza ingxenye ethi Mayelana uma indlela ithi '/mayelana'.

5. “” Lo mugqa uvala ingxenye ye-Router futhi ubonisa i-React ukuthi yonke imizila yethu imenyezelwe.

umphathi wephakheji we-npm

I-NPM (I-Node Package Manager) ingumphathi wephakheji ye-JavaScript esiza onjiniyela ukuthi bafake kalula, babuyekeze, futhi baphathe amaphakheji ezinhlelo zabo zokusebenza ze-React. Ingumphathi wephakheji ozenzakalelayo welabhulali ye-React Router futhi inikeza ukufinyelela kunhlobonhlobo yamaphakheji angasetshenziswa ezinhlelweni ze-React. I-NPM ivumela onjiniyela ukuthi bathole ngokushesha futhi bafake amaphakheji asuka kurejista esemthethweni kanye neminye imithombo yezinkampani zangaphandle. Iphinde inikeze amathuluzi okuphatha ukuncika phakathi kwamaphakheji ahlukene, okwenza kube lula ukulandelela ukuthi yiziphi izinguqulo zephakheji ngayinye ezifakiwe kuhlelo lokusebenza. Ukwengeza, i-NPM ingasetshenziselwa ukubuyekeza kalula amaphakheji akhona noma iwakhiphe uma engasadingeki.

Yini i-react router dom

I-React Router DOM iwumtapo womzila we-React ovumela onjiniyela ukuthi bakhe futhi baphathe imizila ngaphakathi kwezinhlelo zabo zokusebenza ze-React. Inikeza indlela yokumepha ngokumemezela imizila ezingxenyeni, ukuphatha umlando wesiphequluli, nokugcina i-UI ivunyelaniswe ne-URL. Iphinde ihlanganise izici ezifana nokufanisa umzila oguquguqukayo, ukuphatha ukuguqulwa kwendawo, nokukhiqizwa kwe-URL.

Uyifaka kanjani i-Dom npm react router

1. Faka i-React Router:
Okokuqala, faka iphakheji ye-React Router usebenzisa i-npm noma intambo.
Isibonelo, uma usebenzisa i-npm:
npm faka i-react-router-dom

2. Ngenisa Irutha Esabelayo:
Uma ukufakwa sekuqediwe, udinga ukungenisa izingxenye kusuka ku-react-router-dom ungene kuhlelo lwakho lokusebenza. Ngokwesibonelo:
ngenisa i-{ BrowserRouter as Router, Route } isuka 'ku-react-router-dom';

3. Goqa Uhlelo Lwakho Engxenyeni Yerutha:
Isinyathelo esilandelayo ukugoqa ingxenye yakho yempande nge ingxenye esuka ku-react-router-dom. Lokhu kuzohlinzeka uhlelo lwakho lokusebenza ngamakhono omzila futhi lwazise indlela yamanje ye-URL evakashelwa umsebenzisi. Ngokwesibonelo:

const App = () => (
 
 

    );

4. Engeza Imizila Kuhlelo Lwakho Lokusebenza: Isinyathelo sokugcina siwukwengeza imizila kuhlelo lwakho lokusebenza ngokusebenzisa i- ingxenye ehlinzekwa yi-react router dom. Ingxenye yomzila ithatha ama-props amabili; indlela kanye nengxenye ekuvumela ukuthi ucacise ukuthi yiziphi izingxenye okufanele zinikezwe lapho umsebenzisi evakashela indlela ethile ye-URL kuhlelo lwakho lokusebenza Ngokwesibonelo :

const App = () => (
 
 

   )