La xaliyay: Isticmaal Taariikhda React Router v6 abka

Dhibaatada ugu weyn ee la xiriirta isticmaalka History React Router v6 waa in aysan taageerin dariiqinta xashiish-ku-saleysan. Tani waxay ka dhigan tahay in dhammaan URL-yada ay tahay inay noqdaan wadooyin dhammaystiran, taas oo adkeyn karta maareynta iyo ilaalinta codsiga. Intaa waxaa dheer, ma jirto taageero ku dhisan waddooyinka firfircoon, taas oo noqon karta dhibaato marka la abuurayo codsiyo adag oo leh bogag badan. Ugu dambeyntii, History React Router v6 ma bixiso wax taageero ah oo ku saabsan samaynta dhinaca server-ka, taas oo laga yaabo inay lagama maarmaan noqoto xaaladaha qaarkood.

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

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// Koodhkani waxa uu ka soo dejiyaa BrowserRouter, Switch, Route, iyo isticmaalka qaybaha Taariikhiga ah ee maktabadda react-router-dom.
// Kadib waxay abuurtaa hawl loo yaqaan App-ka oo adeegsata isticmaalka taariikhda taariikhda si ay u abuurto shay taariikheed.
// Shaygan taariikhda waxa loo isticmaalaa hawl lagu magacaabo handleClick oo riixaysa gelid cusub ee kaydka taariikhda marka loo yeedho.
// Hawsha App-ka ayaa markaa soo celisa qaar ka mid ah JSX oo ay ku jiraan badhan leh onClick-haye oo wacaya gacan-ku-dhufashada marka la gujiyo.
// Ugu dambeyntii, waxaa jira qayb ka mid ah beddelka oo leh hal qayb oo Route ah oo ku dhex jirta taas oo ka dhigaysa qaybta NewLocation marka waddadeedu ay ku habboon tahay "/meel cusub".

Waa maxay isticmaalka Taariikhda

UseHistory waa Hook React ah oo uu bixiyo React Router kaas oo u oggolaanaya qaybaha inay galaan shayga taariikhda si ay barnaamij ahaan ugu socdaan. Waxa loo isticmaali karaa in lagu riixo goobo cusub kaydka taariikhda, beddelka goobta hadda, dib iyo dib ugu noqoshada taariikhda, iwm.

Sideen ku helaa falcelinta taariikhda wadada

Gudaha React Router, waxaad ku heli kartaa taariikhda dariiqa adoo isticmaalaya jilbaha taariikhda. Xirmadani waxay siinaysaa gelitaanka tusaalaha taariikhda ee aad isticmaali karto si aad ugu dhex socoto, dib iyo dib ugu noqotid taariikhda abkaaga, iyo in ka badan. Si aad u isticmaasho, si fudud uga soo deji jillaabka React Router ka dibna ugu wac qaybtaada:

ka soo dejiso {useHistory} ka 'react-router-dom';

const MyComponent = () => {
taariikhda taariikhda = isticmaalka History ();

// Hadda waxaad ka geli kartaa taariikhda dariiqa adiga oo isticmaalaya shayga 'taariikhda'.

soo noqo (...);
}

Ma ka falceliyaa router taariikhda API

Haa, React Router wuxuu isticmaalaa HTML5 History API si uu ula socdo meesha hadda la joogo iyo taariikhdeeda. Tani waxay u oggolaanaysaa React Router inuu cusboonaysiiyo bogga isagoon dib u soo dejin, taasoo ka dhigaysa navigation si degdeg ah oo fudud. Taariikhda API waxay sidoo kale u oggolaaneysaa isku xirnaanta qoto dheer, taas oo u sahlaysa isticmaalayaasha inay wadaagaan xiriiriyeyaasha si toos ah u geynaya bog gaar ah codsiga.