La xaliyay: ka hel su'aalaha url react router dom v6

Dhibaatada ugu weyn ee la xiriirta helitaanka weydiinta URL React Router DOM v6 waa in aysan bixin hab la dhisay oo lagu galo cabbirrada weydiinta. Taa baddalkeeda, horumariyayaashu waa inay gacanta ku kala saaraan xargaha URL oo ay soo saaraan cabbirrada weydiinta laftooda. Tani waxay noqon kartaa geedi socod caajis ah waxayna horseedi kartaa khaladaad haddii aan si sax ah loo samayn. Intaa waxaa dheer, haddii qaabka URL uu isbeddelo, koodka ayaa laga yaabaa inuu u baahdo in la cusbooneysiiyo si waafaqsan.

import { useLocation } from "react-router-dom";

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. "ka soo daji { useLocation} ka 'react-router-dom';" - Khadkani waxa uu ka soo dejiyaa jilbaha isticmaalkaLocation maktabadda react-router-dom.
2. "const MyComponent = () => {"- Xariiqan waxa ay ku dhawaaqaysaa hawl la yiraahdo MyComponent oo soo celin doonta qayb falcelin ah.
3. "const location = useLocation();" - Khadkani waxa uu isticmaalaa xidhmada la soo dejiyay ee Location si uu u helo macluumaadka ku saabsan goobta uu hadda arjiga ku yaalo (tusaale URL).
4. "const queryParams = URLSearchParams cusub(location.search);" - Xariiqdani waxay abuurtaa shay ka kooban dhammaan cabbiraadaha weydiinta URL-ka hadda jira (tusaale, ?myParam=foo).
5. Inta kale ee koodka ayaa kaliya soo celinaysa qayb falcelin ah oo leh h1 iyo p tag oo muujisa qiimaha myParam ee xargaha weydiinta URL (haddii ay jirto).

React router Dom

React Router DOM waa laybareeri ku wareegta React oo u ogolaata horumariyayaasha inay abuuraan oo maamulaan dariiqyada codsiyadooda React. Waxay siisaa API-ga lagu hagayo arjiga, taasoo u oggolaanaysa horumariyeyaasha inay si cad u qeexaan waddooyinka, u sameeyaan qaybo ku salaysan URL-ka hadda, iyo isku xirka qaybaha kala duwan ee codsiga. Waxa kale oo ay taageertaa sifooyinka sida is-waafajinta dariiqyada firfircoon, raadinta goobta, iyo ilaalada hagidda.

Sideen ku heli karaa xargaha weydiinta ee react v6 router

v6

Gudaha React Router v6, waxaad geli kartaa cabirrada xargaha weydiinta adiga oo isticmaalaya jilbaha isticmaalka. Jillaabkani waxa uu soo celinayaa shay ka kooban macluumaad ku saabsan URL-ka hadda jira oo ay ku jiraan magaca jidka, raadinta, xashiishka iyo hantida gobolka. Hantida goobidda waxa ay ka kooban tahay xudduudaha xadhkaha waydiinta sida xadhig ahaan. Waxaad markaa kala saari kartaa xadhigan si aad u hesho shay ka kooban dhammaan cabbirrada xargaha weydiinta.
Tusaale ahaan:
const {search} = isticmaalkaLocation ();
const params = URLSearchParams cusub (raadin);
const param1 = params.get('param1');