Ratkaistu: hae kysely url react -reitittimestä dom v6

Suurin ongelma, joka liittyy kyselyn saamiseen URL React Router DOM v6:sta, on, että se ei tarjoa sisäänrakennettua tapaa käyttää kyselyparametreja. Sen sijaan kehittäjien on jäsennettävä URL-merkkijono manuaalisesti ja purettava kyselyparametrit itse. Tämä voi olla työläs prosessi ja voi johtaa virheisiin, jos sitä ei tehdä oikein. Lisäksi, jos URL-osoite muuttuu, koodi saattaa olla tarpeen päivittää vastaavasti.

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. "tuo { useLocation } from 'react-router-dom';" – Tämä rivi tuo useLocation-hookin react-router-dom-kirjastosta.
2. “const MyComponent = () => {” – Tämä rivi ilmoittaa MyComponent-nimisen funktion, joka palauttaa React-komponentin.
3. "const location = useLocation();" – Tämä rivi käyttää tuotua useLocation koukkua saadakseen tietoja sovelluksen nykyisestä sijainnista (esim. URL).
4. "const queryParams = new URLSearchParams(location.search);" – Tämä rivi luo objektin, joka sisältää kaikki nykyisen URL-osoitteen kyselyparametrit (esim. ?myParam=foo).
5. Loppuosa koodista palauttaa vain React-komponentin h1- ja p-tunnisteilla, joka näyttää myParamin arvon URL-kyselymerkkijonossa (jos sellainen on olemassa).

React reititin Dom

React Router DOM on Reactin reitityskirjasto, jonka avulla kehittäjät voivat luoda ja hallita reittejä React-sovelluksissaan. Se tarjoaa sovellusliittymän sovelluksen navigointiin, jonka avulla kehittäjät voivat määritellä reittejä, renderöidä komponentteja nykyisen URL-osoitteen perusteella ja linkittää sovelluksen eri osien välillä. Se tukee myös ominaisuuksia, kuten dynaaminen reitin täsmäys, sijainnin seuranta ja navigointivartijat.

Kuinka saan kyselymerkkijonon react v6 -reitittimessä

v6

React Router v6:ssa voit käyttää kyselymerkkijonoparametreja useLocation-koukun avulla. Tämä koukku palauttaa sijaintiobjektin, joka sisältää tietoja nykyisestä URL-osoitteesta, mukaan lukien polun nimi, haku, hash ja tilaominaisuudet. Hakuominaisuus sisältää kyselymerkkijonoparametrit merkkijonona. Voit sitten jäsentää tämän merkkijonon saadaksesi objektin, joka sisältää kaikki kyselyn merkkijonoparametrit.
Esimerkiksi:
const {haku} = useLocation();
const params = new URLSearchParams(search);
const param1 = params.get('param1');