Riješeno: dobiti upit od url react rutera dom v6

Glavni problem vezan za dobijanje upita od URL React Router DOM v6 je taj što ne pruža ugrađeni način za pristup parametrima upita. Umjesto toga, programeri moraju ručno raščlaniti URL string i sami izdvojiti parametre upita. Ovo može biti zamoran proces i može dovesti do grešaka ako se ne uradi ispravno. Osim toga, ako se URL struktura promijeni, kod će možda biti potrebno ažurirati u skladu s tim.

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 } iz 'react-router-dom';” – Ova linija uvozi zakačicu useLocation iz biblioteke react-router-dom.
2. “const MyComponent = () => {” – Ova linija deklarira funkciju pod nazivom MyComponent koja će vratiti React komponentu.
3. “const location = useLocation();” – Ova linija koristi uvezenu kuku useLocation da dobije informacije o trenutnoj lokaciji aplikacije (npr. URL).
4. “const queryParams = new URLSearchParams(location.search);” – Ova linija kreira objekat koji sadrži sve parametre upita u trenutnom URL-u (npr. ?myParam=foo).
5. Ostatak koda samo vraća React komponentu sa h1 i p oznakom koja prikazuje vrijednost myParam u URL upitu (ako postoji).

React ruter Dom

React Router DOM je biblioteka rutiranja za React koja omogućava programerima da kreiraju i upravljaju rutama unutar svojih React aplikacija. Pruža API za navigaciju kroz aplikaciju, omogućavajući programerima da deklarativno definiraju rute, renderiraju komponente na osnovu trenutnog URL-a i vezu između različitih dijelova aplikacije. Takođe podržava funkcije kao što su dinamičko podudaranje rute, praćenje lokacije i navigacioni čuvari.

Kako da dobijem string upita u react v6 ruteru

v6

U React Routeru v6, možete pristupiti parametrima niza upita pomoću kuke useLocation. Ova kuka vraća objekt lokacije koji sadrži informacije o trenutnom URL-u uključujući ime putanje, pretragu, hash i svojstva stanja. Svojstvo pretraživanja sadrži parametre stringa upita kao string. Zatim možete raščlaniti ovaj niz da biste dobili objekt koji sadrži sve parametre niza upita.
Na primjer:
const {search} = useLocation();
const params = novi URLSearchParams(pretraga);
const param1 = params.get('param1');