Vyriešené: získajte dotaz z adresy URL reagovať router dom v6

Hlavným problémom súvisiacim so získavaním dopytu z URL React Router DOM v6 je to, že neposkytuje vstavaný spôsob prístupu k parametrom dopytu. Namiesto toho musia vývojári manuálne analyzovať reťazec adresy URL a sami extrahovať parametre dopytu. Môže to byť zdĺhavý proces a môže viesť k chybám, ak sa nevykoná správne. Okrem toho, ak sa zmení štruktúra adresy URL, môže byť potrebné zodpovedajúcim spôsobom aktualizovať kód.

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 } z 'react-router-dom';“ – Tento riadok importuje háčik useLocation z knižnice respond-router-dom.
2. “const MyComponent = () => {” – Tento riadok deklaruje funkciu s názvom MyComponent, ktorá vráti komponent React.
3. “konšt. umiestnenie = useLocation();” – Tento riadok používa importovaný háčik useLocation na získanie informácií o aktuálnom umiestnení aplikácie (napr. URL).
4. “const queryParams = new URLSearchParams(location.search);” – Tento riadok vytvorí objekt, ktorý obsahuje všetky parametre dopytu v aktuálnej adrese URL (napr. ?myParam=foo).
5. Zvyšok kódu len vracia komponent React s tagom h1 a p, ktorý zobrazuje hodnotu myParam v reťazci URL dotazu (ak existuje).

Reagovať router Dom

React Router DOM je smerovacia knižnica pre React, ktorá umožňuje vývojárom vytvárať a spravovať trasy v rámci ich aplikácií React. Poskytuje rozhranie API na navigáciu v aplikácii, čo umožňuje vývojárom deklaratívne definovať trasy, vykresľovať komponenty na základe aktuálnej adresy URL a spájať rôzne časti aplikácie. Podporuje tiež funkcie ako dynamické priraďovanie trasy, sledovanie polohy a navigačné stráže.

Ako získam reťazec dotazu v routeri Reag v6

v6

V React Router v6 môžete pristupovať k parametrom reťazca dotazu pomocou háku useLocation. Tento hák vráti objekt umiestnenia, ktorý obsahuje informácie o aktuálnej adrese URL vrátane názvu cesty, vyhľadávania, hash a vlastností stavu. Vlastnosť vyhľadávania obsahuje parametre reťazca dotazu ako reťazec. Potom môžete tento reťazec analyzovať, aby ste získali objekt obsahujúci všetky parametre reťazca dotazu.
Napríklad:
const {search} = useLocation();
const params = new URLSearchParams(search);
const param1 = params.get('param1');