Megoldva: lekérdezés az url react router dom v6-tól

A lekérdezés URL React Router DOM v6-ból való lekérésével kapcsolatos fő probléma az, hogy nem biztosít beépített módot a lekérdezési paraméterek elérésére. Ehelyett a fejlesztőknek manuálisan kell elemezniük az URL-karakterláncot, és maguknak kell kivonniuk a lekérdezési paramétereket. Ez fárasztó folyamat lehet, és hibákhoz vezethet, ha nem megfelelően végzik el. Ezenkívül, ha az URL szerkezete megváltozik, előfordulhat, hogy a kódot ennek megfelelően frissíteni kell.

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 } from 'react-router-dom';” – Ez a sor importálja a useLocation hook-ot a react-router-dom könyvtárból.
2. “const MyComponent = () => {” – Ez a sor deklarál egy MyComponent nevű függvényt, amely egy React komponenst ad vissza.
3. "const location = useLocation();" – Ez a sor az importált useLocation hook segítségével információkat kap az alkalmazás aktuális helyéről (pl. URL).
4. "const queryParams = new URLSearchParams(location.search);" – Ez a sor egy objektumot hoz létre, amely tartalmazza az aktuális URL összes lekérdezési paraméterét (pl. ?myParam=foo).
5. A kód többi része csak egy React komponenst ad vissza egy h1 és p címkével, amely megjeleníti a myParam értékét az URL lekérdezési karakterláncában (ha létezik).

React router Dom

A React Router DOM a React útválasztási könyvtára, amely lehetővé teszi a fejlesztők számára, hogy útvonalakat hozzanak létre és kezeljenek a React alkalmazásaikon belül. API-t biztosít az alkalmazásban való navigáláshoz, lehetővé téve a fejlesztők számára, hogy deklaratívan meghatározzák az útvonalakat, az aktuális URL alapján jelenítsenek meg komponenseket, és összekapcsolják az alkalmazás különböző részeit. Olyan funkciókat is támogat, mint a dinamikus útvonalillesztés, a helykövetés és a navigációs őrök.

Hogyan szerezhetem be a lekérdezési karakterláncot a react v6 routerben?

v6

A React Router v6-ban a useLocation hook segítségével érheti el a lekérdezési karakterlánc paramétereit. Ez a hook egy helyobjektumot ad vissza, amely információkat tartalmaz az aktuális URL-ről, beleértve az elérési utat, a keresést, a hash és az állapot tulajdonságait. A keresési tulajdonság karakterláncként tartalmazza a lekérdezési karakterlánc paramétereit. Ezután elemezheti ezt a karakterláncot, hogy megkapja az összes lekérdezési karakterlánc paramétert tartalmazó objektumot.
Például:
const {keresés} = useLocation();
const params = new URLSearchParams(search);
const param1 = params.get('param1');