Rozwiązany: pobierz zapytanie z adresu URL reagującego na router dom v6

Głównym problemem związanym z pobieraniem zapytania z URL React Router DOM v6 jest to, że nie zapewnia on wbudowanego sposobu dostępu do parametrów zapytania. Zamiast tego programiści muszą ręcznie przeanalizować ciąg adresu URL i samodzielnie wyodrębnić parametry zapytania. Może to być żmudny proces i może prowadzić do błędów, jeśli nie zostanie wykonany poprawnie. Dodatkowo, jeśli zmieni się struktura adresu URL, kod może wymagać odpowiedniej aktualizacji.

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. „importuj { useLocation } z „react-router-dom”;” – Ta linia importuje hak useLocation z biblioteki react-router-dom.
2. „const MyComponent = () => {” – Ta linia deklaruje funkcję o nazwie MyComponent, która zwróci komponent React.
3. „stała lokalizacja = useLocation();” – Ta linia używa zaimportowanego haka useLocation w celu uzyskania informacji o bieżącej lokalizacji aplikacji (np. adresu URL).
4. „const queryParams = new URLSearchParams(lokalizacja.wyszukiwanie);” – Ta linia tworzy obiekt, który zawiera wszystkie parametry zapytania w bieżącym adresie URL (np. ?myParam=foo).
5. Pozostała część kodu zwraca tylko komponent React ze znacznikami h1 i p, który wyświetla wartość myParam w ciągu zapytania adresu URL (jeśli istnieje).

Zareaguj na router Dom

React Router DOM to biblioteka routingu dla React, która umożliwia programistom tworzenie tras i zarządzanie nimi w ich aplikacjach React. Zapewnia interfejs API do poruszania się po aplikacji, umożliwiając programistom deklaratywne definiowanie tras, renderowanie komponentów na podstawie bieżącego adresu URL i łączenie między różnymi częściami aplikacji. Obsługuje również funkcje, takie jak dynamiczne dopasowywanie tras, śledzenie lokalizacji i strażnicy nawigacji.

Jak uzyskać ciąg zapytania w routerze React v6

v6

W React Router v6 możesz uzyskać dostęp do parametrów ciągu zapytania za pomocą haka useLocation. Ten hak zwraca obiekt lokalizacji, który zawiera informacje o bieżącym adresie URL, w tym nazwę ścieżki, wyszukiwanie, skrót i właściwości stanu. Właściwość search zawiera parametry ciągu zapytania jako ciąg. Następnie możesz przeanalizować ten ciąg, aby uzyskać obiekt zawierający wszystkie parametry ciągu zapytania.
Na przykład:
const {szukaj} = użyjLokalizacja();
const params = nowe URLSearchParams(search);
const param1 = params.get('param1');