Riješeno: dohvati upit s url react routera dom v6

Glavni problem vezan uz dobivanje upita iz 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 analizirati niz URL-a i sami izdvojiti parametre upita. To može biti naporan proces i može dovesti do pogrešaka ako se ne izvede ispravno. Osim toga, ako se struktura URL-a promijeni, kôd će možda trebati 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. “uvezi {useLocation} iz 'react-router-dom';” – Ovaj redak uvozi useLocation kuku iz biblioteke react-router-dom.
2. “const MyComponent = () => {” – Ovaj redak deklarira funkciju pod nazivom MyComponent koja će vratiti React komponentu.
3. “const location = useLocation();” – Ovaj redak koristi uvezenu kuku useLocation za dobivanje informacija o trenutnoj lokaciji aplikacije (npr. URL).
4. “const queryParams = new URLSearchParams(location.search);” – Ovaj redak stvara objekt koji sadrži sve parametre upita u trenutnom URL-u (npr. ?myParam=foo).
5. Ostatak koda samo vraća React komponentu s h1 i p oznakom koja prikazuje vrijednost myParam u nizu upita URL-a (ako postoji).

React router Dom

React Router DOM je biblioteka za usmjeravanje za React koja programerima omogućuje stvaranje i upravljanje rutama unutar svojih React aplikacija. Pruža API za navigaciju aplikacijom, omogućujući programerima da deklarativno definiraju rute, renderiraju komponente na temelju trenutnog URL-a i povezuju različite dijelove aplikacije. Također podržava značajke kao što su dinamičko usklađivanje ruta, praćenje lokacije i navigacijski čuvari.

Kako mogu dobiti niz upita u react v6 routeru

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 naziv putanje, pretraživanje, hash i svojstva stanja. Svojstvo pretraživanja sadrži parametre niza upita kao niz. Zatim možete raščlaniti ovaj niz da biste dobili objekt koji sadrži sve parametre niza upita.
Na primjer:
const {traži} = useLocation();
const params = new URLSearchParams(search);
const param1 = params.get('param1');