Išspręsta: gauti užklausą iš url react maršrutizatoriaus dom v6

Pagrindinė problema, susijusi su užklausos gavimu iš URL React Router DOM v6, yra ta, kad jame nėra integruoto būdo pasiekti užklausos parametrus. Vietoj to kūrėjai turi rankiniu būdu išanalizuoti URL eilutę ir patys išgauti užklausos parametrus. Tai gali būti varginantis procesas ir gali sukelti klaidų, jei tai nebus padaryta tinkamai. Be to, pasikeitus URL struktūrai, gali tekti atitinkamai atnaujinti kodą.

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. „importuoti { useLocation } iš „react-router-dom“;“ – Ši eilutė importuoja „useLocation Hook“ iš „react-router-dom“ bibliotekos.
2. "const MyComponent = () => {" – ši eilutė deklaruoja funkciją, vadinamą MyComponent, kuri grąžins React komponentą.
3. „const location = useLocation();“ – Šioje eilutėje naudojamas importuotas „useLocation Hook“, kad gautų informaciją apie dabartinę programos vietą (pvz., URL).
4. "const queryParams = naujas URLSearchParams(location.search);" – Šioje eilutėje sukuriamas objektas, kuriame yra visi dabartinio URL užklausos parametrai (pvz., ?myParam=foo).
5. Likusi kodo dalis tiesiog grąžina React komponentą su h1 ir p žyma, kuri rodo myParam reikšmę URL užklausos eilutėje (jei ji yra).

React maršrutizatorius Dom

„React Router“ DOM yra „React“ maršruto parinkimo biblioteka, leidžianti kūrėjams kurti ir valdyti maršrutus savo „React“ programose. Tai suteikia API naršymui programoje, leidžiančią kūrėjams deklaratyviai apibrėžti maršrutus, pateikti komponentus pagal dabartinį URL ir susieti skirtingas programos dalis. Ji taip pat palaiko tokias funkcijas kaip dinaminis maršruto suderinimas, vietos sekimas ir navigacijos apsauga.

Kaip gauti užklausos eilutę react v6 maršrutizatoriuje

v6

React Router v6 galite pasiekti užklausos eilutės parametrus naudodami „useLocation Hook“. Šis kabliukas grąžina vietos objektą, kuriame yra informacija apie dabartinį URL, įskaitant kelio pavadinimą, paiešką, maišos ir būsenos ypatybes. Paieškos ypatybėje yra užklausos eilutės parametrai kaip eilutė. Tada galite išanalizuoti šią eilutę, kad gautumėte objektą, kuriame būtų visi užklausos eilutės parametrai.
Pavyzdžiui:
const {paieška} = useLocation();
const params = naujas URLPaieškaParams(search);
const param1 = params.get('param1');