Atrisināts: iegūt vaicājumu no url react maršrutētāja dom v6

Galvenā problēma, kas saistīta ar vaicājuma iegūšanu no URL React Router DOM v6, ir tā, ka tas nenodrošina iebūvētu veidu, kā piekļūt vaicājuma parametriem. Tā vietā izstrādātājiem ir manuāli jāparsē URL virkne un pašiem jāizņem vaicājuma parametri. Tas var būt nogurdinošs process un var izraisīt kļūdas, ja tas netiek darīts pareizi. Turklāt, ja mainās URL struktūra, kods var būt attiecīgi jāatjaunina.

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ēt { useLocation } no 'react-router-dom';” – Šī rinda importē useLocation hook no react-router-dom bibliotēkas.
2. “const MyComponent = () => {” — šī rinda deklarē funkciju MyComponent, kas atgriezīs React komponentu.
3. “const location = useLocation();” – Šajā rindā tiek izmantots importētais useLocation āķis, lai iegūtu informāciju par lietojumprogrammas pašreizējo atrašanās vietu (piemēram, URL).
4. “const queryParams = new URLSearchParams(location.search);” – Šī rindiņa izveido objektu, kas satur visus vaicājuma parametrus pašreizējā URL (piemēram, ?myParam=foo).
5. Pārējā koda daļa tikai atgriež React komponentu ar h1 un p tagu, kas URL vaicājuma virknē parāda myParam vērtību (ja tāda pastāv).

React maršrutētājs Dom

React Router DOM ir React maršrutēšanas bibliotēka, kas ļauj izstrādātājiem izveidot un pārvaldīt maršrutus savās React lietojumprogrammās. Tas nodrošina API navigācijai lietojumprogrammā, ļaujot izstrādātājiem deklaratīvi definēt maršrutus, renderēt komponentus, pamatojoties uz pašreizējo URL, un izveidot saites starp dažādām lietojumprogrammas daļām. Tā atbalsta arī tādas funkcijas kā dinamiska maršruta saskaņošana, atrašanās vietas izsekošana un navigācijas aizsargi.

Kā iegūt vaicājuma virkni react v6 maršrutētājā

v6

Programmā React Router v6 varat piekļūt vaicājuma virknes parametriem, izmantojot āķi useLocation. Šis āķis atgriež atrašanās vietas objektu, kas satur informāciju par pašreizējo URL, tostarp ceļa nosaukumu, meklēšanu, jaucējkodu un stāvokļa rekvizītus. Meklēšanas rekvizīts satur vaicājuma virknes parametrus kā virkni. Pēc tam varat parsēt šo virkni, lai iegūtu objektu, kurā ir visi vaicājuma virknes parametri.
Piemēram:
const {meklēšana} = useLocation();
const params = new URLSearchParams(meklēt);
const param1 = params.get('param1');