Gelöst: Abfrage vom URL-Reaktionsrouter dom v6 erhalten

Das Hauptproblem beim Abrufen von Abfragen von URL React Router DOM v6 besteht darin, dass es keine integrierte Möglichkeit zum Zugriff auf die Abfrageparameter bietet. Stattdessen müssen Entwickler die URL-Zeichenfolge manuell parsen und die Abfrageparameter selbst extrahieren. Dies kann ein mühsamer Prozess sein und zu Fehlern führen, wenn er nicht korrekt durchgeführt wird. Wenn sich die URL-Struktur ändert, muss der Code außerdem möglicherweise entsprechend aktualisiert werden.

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. „importiere { useLocation } aus ‚react-router-dom‘;“ – Diese Zeile importiert den useLocation-Hook aus der React-Router-Dom-Bibliothek.
2. „const MyComponent = () => {“ – Diese Zeile deklariert eine Funktion namens MyComponent, die eine React-Komponente zurückgibt.
3. „const location = useLocation();“ – Diese Zeile verwendet den importierten useLocation-Hook, um Informationen über den aktuellen Standort der Anwendung (z. B. URL) zu erhalten.
4. „const queryParams = new URLSearchParams(location.search);“ – Diese Zeile erstellt ein Objekt, das alle Abfrageparameter in der aktuellen URL enthält (z. B. ?myParam=foo).
5. Der Rest des Codes gibt nur eine React-Komponente mit einem h1- und einem p-Tag zurück, das den Wert von myParam in der URL-Abfragezeichenfolge anzeigt (sofern vorhanden).

Router Dom reagieren

React Router DOM ist eine Routing-Bibliothek für React, die es Entwicklern ermöglicht, Routen innerhalb ihrer React-Anwendungen zu erstellen und zu verwalten. Es bietet eine API zum Navigieren in der Anwendung, die es Entwicklern ermöglicht, Routen deklarativ zu definieren, Komponenten basierend auf der aktuellen URL zu rendern und zwischen verschiedenen Teilen der Anwendung zu verlinken. Es unterstützt auch Funktionen wie dynamische Routenanpassung, Standortverfolgung und Navigationsschutz.

Wie erhalte ich die Abfragezeichenfolge im React v6-Router

v6

In React Router v6 können Sie mit dem useLocation-Hook auf die Parameter der Abfragezeichenfolge zugreifen. Dieser Hook gibt ein Standortobjekt zurück, das Informationen über die aktuelle URL enthält, einschließlich Pfadname, Suche, Hash und Zustandseigenschaften. Die Such-Eigenschaft enthält die Parameter der Abfragezeichenfolge als Zeichenfolge. Sie können diese Zeichenfolge dann parsen, um ein Objekt zu erhalten, das alle Parameter der Abfragezeichenfolge enthält.
Beispielsweise:
const {Suche} = useLocation();
const params = neue URLSearchParams(Suche);
const param1 = params.get('param1');