Kuxazululiwe: thola umbuzo ku-url react router dom v6

Inkinga enkulu ehlobene nokuthola umbuzo ku-URL React Router DOM v6 ukuthi ayinikezi indlela eyakhelwe ngaphakathi yokufinyelela amapharamitha ombuzo. Esikhundleni salokho, onjiniyela kufanele bahlaziye mathupha iyunithi yezinhlamvu ze-URL futhi bakhiphe amapharamitha wombuzo ngokwabo. Lokhu kungaba inqubo eyisicefe futhi kungaholela emaphutheni uma kungenziwanga ngendlela efanele. Ukwengeza, uma isakhiwo se-URL sishintsha, ikhodi ingase idinge ukubuyekezwa ngokufanele.

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. “ngenisa {useLocation } kusuka ku-'react-router-dom';” - Lo mugqa ungenisa ihuku le-useLocation kusuka kumtapo wezincwadi we-react-router-dom.
2. “consst MyComponent = () => {” – Lo mugqa umemezela umsebenzi okuthiwa I-MyComponent ozobuyisela ingxenye ye-React.
3. “consst indawo = useLocation();” - Lo mugqa usebenzisa ihuku le-useLocation elingenisiwe ukuze uthole ulwazi mayelana nendawo yamanje yohlelo lokusebenza (isb, i-URL).
4. “const queryParams = new URLSearchParams(location.search);” – Lo mugqa udala into equkethe wonke amapharamitha emibuzo ku-URL yamanje (isb, ?myParam=foo).
5. Yonke enye ikhodi imane ibuyisela ingxenye ethi React enomaka ongu-h1 kanye no-p obonisa inani le-myParam kuyunithi yezinhlamvu zombuzo we-URL (uma ikhona).

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. Ihlinzeka nge-API yokuzulazula kuhlelo lokusebenza, ivumela onjiniyela ukuthi bachaze ngokudalula imizila, banikeze izingxenye ngokusekelwe ku-URL yamanje, kanye nokuxhumanisa phakathi kwezingxenye ezihlukene zohlelo lokusebenza. Iphinde isekele izici ezinjengokufaniswa komzila oguquguqukayo, ukulandelela indawo, nonogada bokuzulazula.

Ngiyithola kanjani iyunithi yezinhlamvu ku-react v6 router

v6

Ku-React Router v6, ungafinyelela amapharamitha weyunithi yezinhlamvu usebenzisa ihuku ye-useLocation. Le hook ibuyisela into yendawo equkethe ulwazi mayelana ne-URL yamanje ehlanganisa igama lendlela, ukusesha, i-hashi kanye nezakhiwo zesimo. Isici sokusesha siqukethe amapharamitha eyunithi yezinhlamvu yombuzo njengeyunithi yezinhlamvu. Ungakwazi ke ukuncozulula lolu chungechunge ukuze uthole into equkethe wonke amapharamitha weyunithi yezinhlamvu zombuzo.
Ngokwesibonelo:
const {search} = useLocation();
const params = new URLSearchParams(search);
const param1 = params.get('param1');