Rešeno: pridobi poizvedbo iz usmerjevalnika url react dom v6

Glavna težava v zvezi s pridobivanjem poizvedbe iz usmerjevalnika URL React Router DOM v6 je, da ne zagotavlja vgrajenega načina za dostop do parametrov poizvedbe. Namesto tega morajo razvijalci sami ročno razčleniti niz URL-ja in ekstrahirati poizvedbene parametre. To je lahko dolgočasen postopek in lahko povzroči napake, če se ne izvede pravilno. Poleg tega, če se spremeni struktura URL-ja, bo morda treba kodo ustrezno posodobiti.

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. “uvozi { useLocation } iz 'react-router-dom';” – Ta vrstica uvozi kljuko useLocation iz knjižnice react-router-dom.
2. “const MyComponent = () => {” – Ta vrstica deklarira funkcijo, imenovano MyComponent, ki bo vrnila komponento React.
3. "const location = useLocation();" – Ta vrstica uporablja uvoženo kljuko useLocation za pridobitev informacij o trenutni lokaciji aplikacije (npr. URL).
4. »const queryParams = new URLSearchParams(location.search);« – Ta vrstica ustvari objekt, ki vsebuje vse poizvedbene parametre v trenutnem URL-ju (npr. ?myParam=foo).
5. Preostanek kode samo vrne komponento React z oznako h1 in p, ki prikaže vrednost myParam v nizu poizvedbe URL (če obstaja).

React router Dom

React Router DOM je usmerjevalna knjižnica za React, ki razvijalcem omogoča ustvarjanje in upravljanje poti znotraj njihovih aplikacij React. Zagotavlja API za krmarjenje po aplikaciji, ki razvijalcem omogoča, da deklarativno definirajo poti, upodabljajo komponente na podlagi trenutnega URL-ja in povezujejo različne dele aplikacije. Podpira tudi funkcije, kot so dinamično ujemanje poti, sledenje lokaciji in navigacijski stražarji.

Kako dobim poizvedbeni niz v usmerjevalniku React v6

v6

V React Router v6 lahko do parametrov poizvedbenega niza dostopate s kavljem useLocation. Ta kavelj vrne objekt lokacije, ki vsebuje informacije o trenutnem URL-ju, vključno z lastnostmi imena poti, iskanja, zgoščene vrednosti in stanja. Lastnost iskanja vsebuje parametre poizvedbenega niza kot niz. Nato lahko ta niz razčlenite, da dobite objekt, ki vsebuje vse parametre poizvedbenega niza.
Na primer:
const {iskanje} = useLocation();
const params = new URLSearchParams(iskanje);
const param1 = params.get('param1');