Isonjululwe: fumana umbuzo kwi-url react router dom v6

Ingxaki ephambili enxulumene nokufumana umbuzo kwi-URL React Router DOM v6 kukuba ayiboneleli ngendlela eyakhelweyo yokufikelela kwiiparamitha zombuzo. Endaweni yoko, abaphuhlisi kufuneka bacazulule ngokwabo umtya we-URL kwaye bakhuphe umbuzo weparamitha ngokwabo. Oku kunokuba yinkqubo edinayo kwaye kunokukhokelela kwiimpazamo ukuba akwenziwanga ngokuchanekileyo. Ukongezelela, ukuba isakhiwo se-URL sitshintsha, ikhowudi inokufuna ukuhlaziywa ngokufanelekileyo.

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 ngaphandle {useLocation } ukusuka kwi-'react-router-dom';” -Lo mgca ungenisa ihuku ye-useLocation kwilayibrari ye-react-router-dom.
2. "const MyComponent = () => {" - Lo mgca uchaza umsebenzi obizwa ngokuba yi-MyComponent eya kubuyisela i-React component.
3. “consst indawo = useLocation();” - Lo mgca usebenzisa i-hook ye-useLocation engenisiweyo ukufumana ulwazi malunga nendawo yangoku yesicelo (umzekelo, i-URL).
4. “const queryParams = new URLSearchParams(location.search);” – Lo mgca wenza into equlathe zonke iiparamitha zombuzo kwiURL yangoku (umzekelo, ?myParam=foo).
5. Enye ikhowudi ibuyisela icandelo le-React nge-h1 kunye ne-p tag ebonisa ixabiso le-myParam kumtya wombuzo we-URL (ukuba ukhona).

React router Dom

I-React Router DOM lithala leencwadi le-React elivumela abaphuhlisi ukuba benze kwaye balawule iindlela ngaphakathi kwezicelo zabo zeReact. Ibonelela nge-API yokukhangela kwisicelo, ivumela abaphuhlisi ukuba bachaze iindlela, banikeze amacandelo asekelwe kwi-URL yangoku, kunye nekhonkco phakathi kweendawo ezahlukeneyo zesicelo. Ikwaxhasa izinto ezinje ngokuthelekisa indlela eguquguqukayo, ukulandelela indawo, kunye noonogada bokuhamba.

Ndiwufumana njani umtya wombuzo kwi-react v6 router

v6

KwiReact Router v6, unokufikelela kwiparameters zomtya usebenzisa useLocation hook. Le hook ibuyisela into yendawo equlethe ulwazi malunga ne-URL yangoku equka igama lendlela, uphendlo, i-hash kunye neepropati zombuso. Ipropathi yokukhangela iqulethe iparamitha zomtya wombuzo njengomtya. Ungacazulula lo mtya ukufumana into equlathe zonke iiparamitha zomtya wombuzo.
Umzekelo:
const {ukukhangela} = useLocation();
const params = entsha URLSearchParams(ukukhangela);
const param1 = params.get('param1');