Isonjululwe: i-react router dom npm

Eyona ngxaki iphambili enxulumene neReact Router DOM kukuba kunokuba nzima ukuyilungisa. Ngenxa yokuba indlela iphathwa yiReact Router, kunokuba nzima ukukhomba ngqo apho umba wenzeke khona. Ukongeza, kuba iReact Router DOM isebenzisa iJavaScript kwindlela yayo, naziphi na iimpazamo kwikhowudi zinokubangela ukuziphatha okungalindelekanga kwaye yenze ukulungisa ingxaki nangakumbi. Okokugqibela, ukuba umsebenzisi unenguqulelo endala yeReact Router DOM efakiweyo, banokufumana imiba yokuhambelana neenguqulelo ezintsha zethala leencwadi.

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

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

1. “Ngenisa ngaphandle {IbrowserRouter njengeNdlela, Indlela } isuka kwi-'react-router-dom';”
Lo mgca ungenisa ngaphandle i-BrowserRouter kunye ne-Route amacandelo kwilayibrari ye-react-router-dom.

2 "U"
Lo mgca wenza icandelo Lomzila oza kusetyenziswa ukusonga zonke iindlela kwisicelo.

3 "U"
Lo mgca wenza icandelo leNdlela elizakwenza icandelo laseKhaya xa umendo ungu '/'. Ipropu 'echanekileyo' iqinisekisa ukuba le ndlela iyakudityaniswa kuphela xa indlela ichanekile '/'.

4 "U” Lo mgca wenza icandelo leNdlela elizakwenza icandelo elimalunga nokuba '/ malunga'.

5. “” Lo mgca uvala icandelo le-Router kwaye ubonisa i-React ukuba zonke iindlela zethu zibhengeziwe.

Npm umphathi wepakethe

I-NPM (uMphathi wePakethe yeNode) ngumphathi wepakethe yeJavaScript enceda abaphuhlisi ukuba bafake ngokulula, bahlaziye kwaye balawule iipakethe zabo zeReact applications. Ingoyena mlawuli wepakethe ongagqibekanga welayibrari yeReact Router kwaye ibonelela ngofikelelo kuluhlu olubanzi lweepakethe ezinokusetyenziswa kwiReact applications. I-NPM ivumela abaphuhlisi ukuba bafumane ngokukhawuleza kwaye bafake iipakethe ezivela kubhaliso olusemthethweni kunye neminye imithombo yeqela lesithathu. Ikwabonelela ngezixhobo zokulawula ukuxhomekeka phakathi kweepakethe ezahlukeneyo, okwenza kube lula ukugcina umkhondo wokuba zeziphi iinguqulelo zephakheji nganye ezifakwe kwisicelo. Ukongeza, i-NPM inokusetyenziselwa ukuhlaziya ngokulula iipakethe ezikhoyo okanye nokuzikhupha ukuba azisafuneki.

Yintoni i-react router dom

I-React Router DOM lithala leencwadi le-React elivumela abaphuhlisi ukuba benze kwaye balawule iindlela ngaphakathi kwezicelo zabo zeReact. Ibonelela ngendlela yokuchaza iindlela zemephu kumacandelo, lawula imbali yesikhangeli, kwaye ugcine i-UI ihambelana ne-URL. Ikwabandakanya iimpawu ezinjengokulinganisa umzila oguquguqukayo, ukuphatha inguqu yendawo, kunye nokuveliswa kwe-URL.

Uyifakela njani i-Dom npm i-react router

1.Fakela iReact Router:
Okokuqala, faka iphakheji yeReact Router usebenzisa i-npm okanye umsonto.
Umzekelo, ukuba usebenzisa i-npm:
npm faka i-react-router-dom

2.Ngenisa iReact React:
Nje ukuba ufakelo lugqityiwe, kufuneka ungenise amacandelo kwi-react-router-dom kwisicelo sakho. Umzekelo:
ngenisa ngaphandle {IbrowserRouter njengeNdlela, Indlela } isuka kwi-'react-router-dom';

3. Gquba i-App yakho kwiNdlela yeNdlela:
Inyathelo elilandelayo kukusonga ingcambu icandelo lakho nge icandelo ukusuka kwi-react-router-dom. Oku kuya kubonelela ngesicelo sakho ngezakhono zokuhambisa kwaye yenze ukuba iqonde indlela yangoku ye-URL endwendwelwa ngumsebenzisi. Umzekelo:

const App = () => (
 
 

    );

4. Yongeza iindlela kwi-App yakho: Inyathelo lokugqibela kukongeza iindlela kwisicelo sakho ngokusebenzisa i icandelo elinikezelwe yi-react router dom. Icandelo lendlela lithatha iipropu ezimbini; indlela kunye necandelo elikuvumela ukuba ukhankanye ukuba ngawaphi amalungu afanele ukunikezelwa xa umsebenzisi endwendwela umendo othile weURL kwisicelo sakho Umzekelo :

const App = () => (
 
 

   )