Vyřešeno: získat dotaz z adresy URL reagovat router dom v6

Hlavním problémem souvisejícím se získáváním dotazu z URL React Router DOM v6 je to, že neposkytuje vestavěný způsob přístupu k parametrům dotazu. Místo toho musí vývojáři ručně analyzovat řetězec adresy URL a extrahovat parametry dotazu sami. To může být únavný proces a může vést k chybám, pokud není provedeno správně. Pokud se navíc změní struktura URL, může být nutné odpovídajícím způsobem aktualizovat 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 řádek importuje háček useLocation z knihovny reagovat-router-dom.
2. “const MyComponent = () => {” – Tento řádek deklaruje funkci nazvanou MyComponent, která vrátí komponentu React.
3. “const location = useLocation();” – Tento řádek používá importovaný háček useLocation k získání informací o aktuálním umístění aplikace (např. URL).
4. “const queryParams = new URLSearchParams(location.search);” – Tento řádek vytvoří objekt, který obsahuje všechny parametry dotazu v aktuální adrese URL (např. ?myParam=foo).
5. Zbytek kódu pouze vrací komponentu React s tagem h1 a p, který zobrazuje hodnotu myParam v řetězci URL dotazu (pokud existuje).

Reagovat router Dom

React Router DOM je směrovací knihovna pro React, která umožňuje vývojářům vytvářet a spravovat trasy v rámci jejich aplikací React. Poskytuje rozhraní API pro navigaci v aplikaci a umožňuje vývojářům deklarativně definovat trasy, vykreslovat komponenty na základě aktuální adresy URL a propojovat různé části aplikace. Podporuje také funkce, jako je dynamické přizpůsobení trasy, sledování polohy a navigační stráže.

Jak získám řetězec dotazu v routeru Reagovat v6

v6

V React Router v6 můžete přistupovat k parametrům řetězce dotazu pomocí háčku useLocation. Tento háček vrací objekt umístění, který obsahuje informace o aktuální adrese URL včetně názvu cesty, hledání, hash a vlastností stavu. Vlastnost search obsahuje parametry řetězce dotazu jako řetězec. Poté můžete tento řetězec analyzovat a získat objekt obsahující všechny parametry řetězce dotazu.
Například:
const {search} = useLocation();
const params = new URLSearchParams(search);
const param1 = params.get('param1');