Yakagadziriswa: tora mubvunzo kubva kuurl react router dom v6

Dambudziko guru rine chekuita nekuwana mubvunzo kubva kuURL React Router DOM v6 nderekuti haipe yakavakirwa-mukati nzira yekuwana iyo query paramita. Pane kudaro, vagadziri vanofanira kupenengura tambo yeURL nemaoko votora maparamita emubvunzo ivo pachavo. Izvi zvinogona kuita zvinonetesa uye zvinogona kukonzera kukanganisa kana zvikasaitwa nemazvo. Pamusoro pezvo, kana iyo URL chimiro ichichinja, iyo kodhi ingangoda kuvandudzwa maererano.

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. "import {useLocation } kubva 'react-router-dom';" -Mutsetse uyu unopinza useLocation hoko kubva kune react-router-dom raibhurari.
2. "const MyComponent = () => {" - Uyu mutsara unozivisa basa rinonzi MyComponent iyo ichadzorera React component.
3. “consst location = useLocation();” -Mutsetse uyu unoshandisa yakaunzwa kunze useLocation hoko kuti uwane ruzivo nezve yazvino nzvimbo yekushandisa (semuenzaniso, URL).
4. “const queryParams = new URLSearchParams(location.search);” -Mutsetse uyu unogadzira chinhu chine ese emibvunzo paramita muURL iripo (semuenzaniso, ?myParam=foo).
5. Imwe kodhi yekodhi iri kungodzosera chikamu cheReact chine h1 uye p tag inoratidza kukosha kweMyParam mu URL yemubvunzo tambo (kana iripo).

React router Dom

React Router DOM iraibhurari yenzira yeReact iyo inobvumira vanogadzira kugadzira uye kugadzirisa nzira mukati meReact application yavo. Inopa API yekufambisa iyo application, ichibvumira vanogadzira kutsanangura nenzira yakajeka nzira, kupa zvikamu zvinoenderana neiyo yazvino URL, uye chinongedzo pakati pezvikamu zvakasiyana zvekushandisa. Iyo zvakare inotsigira maficha akadai seane simba nzira yekufananidza, yekutevera nzvimbo, uye maguard ekufamba.

Ini ndinowana sei tambo yemubvunzo mune react v6 router

v6

MuReact Router v6, unogona kuwana tambo yemibvunzo paramita uchishandisa useLocation hoko. Hoko iyi inodzosa chinhu chenzvimbo icho chine ruzivo nezve URL yazvino inosanganisira nzira, kutsvaga, hashi uye zvivakwa zvehurumende. Nzvimbo yekutsvaga ine tambo yemibvunzo parameters setambo. Iwe unogona ipapo kupfuudza tambo iyi kuti uwane chinhu chine ese emubvunzo tambo paramita.
Semuyenzaniso:
const {search} = useLocation();
const params = itsva URLSearchParams(tsvaga);
const param1 = params.get('param1');