La xaliyay: react router ku dar dib u dhac si uu u qabto dhammaan

Dhibaatada ugu weyn ee la xiriirta React Router iyo ku darista dib u dhac si loo qabto dhammaan waa inay adkaan karto in si sax ah loo habeeyo dariiqa dib u dhaca. Waddada dib-u-dhaca waxay u baahan tahay in loo habeeyo si ay u qabato dhammaan codsiyada, oo ay ku jiraan kuwa aan sax ahayn. Haddii qaabaynta aan loo samayn si sax ah, markaas codsiyada wadooyinka aan saxda ahayn laguma qabsan doono dariiqa dib u dhaca waxaana laga yaabaa inay ka dhalato khaladaad ama dhaqan lama filaan ah. Intaa waxaa dheer, haddii codsigu ka kooban yahay waddooyin firfircoon (tusaale, ku salaysan gelinta isticmaalaha), markaas kuwan waxay u baahan yihiin in la tixgeliyo marka la habeynayo dariiqa dib-u-dhaca si ay iyaguna u qabtaan.

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Fallback route */}
      <Route component={NoMatch} /> 

    </Switch>
  </Router>  
);

// Sadarka 1: Khadkani waxa uu ka soo dejiyaa BrowserRouter, Route, iyo qaybaha beddelka ee maktabadda react-router-dom.
// Sadarka 2: Xariiqdani waxa ay qeexaysaa aalada joogtada ah ee loo yaqaan App-ka oo ah qayb hawleed.
// Sadarka 3: Khadkani waxa uu ka dhigayaa qaybta router ka react-router-dom.
// Sadarka 4: Khadkani waxa uu ka dhigayaa qaybta Switch ka react-router-dom.
// Sadarka 5 & 6: Khadadkani waxay keenaan laba qaybood oo Route ah oo leh wadooyin sax ah iyo qaybo si loo sameeyo marka wadooyinkaas la isku daro.
// Sadarka 8: Khadkani waxa uu dhigayaa dariiq dib u dhac ah haddii midna dariiqyada kale aan la is waafajin. Waxay bixin doontaa qaybta NoMatch haddii aysan jirin waddooyin kale oo ku habboon.

Waa maxay react router

React Router waa laybareeriga dajinta codsiyada React. Waxay u ogolaataa horumariyeyaasha inay abuuraan waddooyin iyo qaybo loo isticmaali karo in lagu dhex maro bogag kala duwan ee codsiga React. Waxa kale oo ay bixisaa astaamo ay ka mid yihiin isbarbardhigga dariiqyada firfircoon, cabbirrada weydiinta, iyo xaaladda goobta. Intaa waxaa dheer, waxay taageertaa samaynta dhinaca server-ka iyo kala qaybinta koodka.

Qaado-dhammaan dariiqa dib u dhaca

Dariiqa dib u dhaca oo dhan waa dariiqa React Router kaas oo u dhigma waddo kasta oo aan ku habboonayn dariiqyo kale. Habka noocaan ah waxaa badanaa loo isticmaalaa in lagu abuuro bog 404 ah, ama in lagu sameeyo qayb dhammaan waddooyinka aan isbarbar dhigin. Waxaa muhiim ah in la ogaado in dariiqa dib-u-dhacu uu mar walba ahaado dariiqa ugu dambeeya ee liiska waddooyinka, maadaama ay la jaanqaadi doonto waddo kasta oo ay ka hortagto in waddooyinka kale la isku beego.

Sida saxda ah ee loo qeexo dariiqa dib u dhaca

Markaad isticmaalayso React Router, dariiqa dib u dhaca waa dariiq la isticmaalo marka aysan jirin dariiqyo kale oo u dhigma URL la codsaday. Caadi ahaan waxa loo isticmaalaa in lagu jiheeyo isticmaalayaasha bog 404 ama bog kale marka URL la codsaday aanu jirin.

Si loo qeexo dariiqa dib u dhaca si sax ah React Router, waa inaad marka hore abuurtaa a qayb oo ku duub hareeraha waddooyinkaaga. Gudaha qayb, waa inaad ku dartaa dariiqyadaada caadiga ah oo ay ku xigto a qayb aan lahayn waddo cayiman. Tani waxay noqon doontaa dariiqaaga dib u dhaca waxayna qaban doontaa codsi kasta oo aan ku habboonayn mid ka mid ah waddooyinkaaga kale. Waxaad markaa qeexi kartaa waxa dhici doona marka jidkan la is waafajiyo, sida u jiheynta bogga 404 ama muujinta qayb kale.

Waa maxay sababta dariiqa dib u dhaca had iyo jeer u kici jiray

Dariiqa dib-u-dhaca ee React Router had iyo jeer waa la kiciyaa marka dariiqa URL aanu ku habboonayn mid ka mid ah waddooyinka jira. Tani waxay dhici kartaa marka isticmaaluhu uu gacanta ku qoro URL aan sax ahayn, ama haddii macquulka habaynta codsiga aan si sax ah loo habayn. Dariiqa dib-u-dhaca waxay u ogolaataa horumariyayaasha inay si xarago leh u maareeyaan xaaladahan oo ay siiyaan jawaab celin isticmaalaha, sida 404 bog ama u jiheeyaan bogga guriga.