Rezolvat: obțineți interogarea de la url react router dom v6

Principala problemă legată de obținerea interogării de la URL React Router DOM v6 este că nu oferă o modalitate încorporată de a accesa parametrii de interogare. În schimb, dezvoltatorii trebuie să analizeze manual șirul URL și să extragă ei înșiși parametrii de interogare. Acesta poate fi un proces obositor și poate duce la erori dacă nu este făcut corect. În plus, dacă structura URL se modifică, este posibil ca codul să fie actualizat în consecință.

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 } din „react-router-dom”;” – Această linie importă cârligul useLocation din biblioteca react-router-dom.
2. „const MyComponent = () => {” – Această linie declară o funcție numită MyComponent care va returna o componentă React.
3. „const location = useLocation();” – Această linie folosește cârligul useLocation importat pentru a obține informații despre locația curentă a aplicației (de exemplu, URL).
4. „const queryParams = new URLSearchParams(location.search);” – Această linie creează un obiect care conține toți parametrii de interogare din adresa URL curentă (de exemplu, ?myParam=foo).
5. Restul codului returnează doar o componentă React cu o etichetă h1 și p care afișează valoarea myParam în șirul de interogare URL (dacă există).

React router Dom

React Router DOM este o bibliotecă de rutare pentru React care permite dezvoltatorilor să creeze și să gestioneze rute în aplicațiile lor React. Oferă un API pentru navigarea în aplicație, permițând dezvoltatorilor să definească în mod declarativ rute, să redea componente pe baza URL-ului curent și să conecteze diferite părți ale aplicației. De asemenea, acceptă funcții precum potrivirea dinamică a rutei, urmărirea locației și paznicii de navigație.

Cum obțin șirul de interogare în routerul react v6

v6

În React Router v6, puteți accesa parametrii șirului de interogare folosind cârligul useLocation. Acest cârlig returnează un obiect locație care conține informații despre adresa URL curentă, inclusiv numele căii, căutarea, hash și proprietățile de stare. Proprietatea de căutare conține parametrii șirului de interogare ca șir. Apoi puteți analiza acest șir pentru a obține un obiect care conține toți parametrii șirului de interogare.
De exemplu:
const {căutare} = useLocation();
const params = URLSearchParams nou (căutare);
const param1 = params.get('param1');