So aktualisieren Sie Abfrageparameter in React

Abfrageparameter sind Name/Wert-Paare, die Sie am Ende einer URL hinzufügen können. Sie ermöglichen es Ihnen, Daten in dieser URL zu speichern.

Eine praktische Anwendung von Abfrageparametern besteht darin, Werte aus der Suche eines Benutzers zu speichern.

Verwenden von React Router zum Aktualisieren von Abfrageparametern

Wenn ein Benutzer eine Suchanfrage in eine Suchleiste eingibt, sollten Sie diese Suchanfrage in der URL speichern. Wenn ein Benutzer beispielsweise eine Liste von Blogs nach Beiträgen in der Kategorie „Reagieren“ durchsucht hat, sollte die aktualisierte URL wie folgt aussehen: /posts? tag=reagieren.

React stellt den useSearchParams-Hook bereit, der Ihnen hilft, Abfragezeichenfolgen zu lesen oder zu aktualisieren.

Erstellen Sie zunächst eine Suchleiste in App.js.

importieren { useState } aus"reagieren";
ExportStandardFunktionApp() {
konst [Abfrage, SetAbfrage] = useState('')
konst handleChange = (e) => {
Abfrage(e.Ziel.Wert)
 };
zurückkehren (
<div>
<formRolle="suchen">
<Eingangbei Änderung={HandleÄnderung}Wert={Anfrage}Typ="suchen" />
form>
div>
 );
}

Denken Sie daran, zu folgen Best Practices bei der Verwendung von React um das Beste aus ihnen herauszuholen.

Installieren Sie als Nächstes den React-Router und fügen Sie Ihrer Anwendung Routing hinzu. Dies ist ein Muss, damit der useSearchParams-Hook funktioniert.

importieren Reagieren aus"reagieren";
importieren ReactDOM aus"react-dom/client";
importieren"./index.css";
importieren App aus"./App";
importieren { BrowserRouter, Route, Routen } aus"reagieren-router-dom";
konst root = ReactDOM.createRoot(dokumentieren.getElementById("Wurzel"));
Wurzel.machen(
<Reagieren. Strikter Modus>
<BrowserRouter>
<Routen>
"/" element={} />
Routen>
BrowserRouter>
Reagieren. Strikter Modus>
);

Jetzt können Sie die Abfragen in der URL speichern, während der Benutzer eintippt, indem Sie die Funktion handleChange() ändern.

importieren { useState } aus"reagieren";
importieren { useSearchParams } aus"reagieren-router-dom";
ExportStandardFunktionApp() {
konst [Abfrage, SetAbfrage] = useState("");
konst [searchParams, setSearchParams] = useSearchParams({});
konst handleChange = (e) => {
setSearchParams({ Anfrage: e.Zielwert });
Abfrage(e.Ziel.Wert);
 };
zurückkehren (
<div>
<formRolle="suchen">
<Eingangbei Änderung={HandleÄnderung}Wert={Anfrage}Typ="suchen" />
form>
div>
 );
}

Abrufen der Abfragewerte aus der URL

Sie können einen einzelnen Abfragewert abrufen, indem Sie searchParams.get() verwenden und den Namen des Abfrageparameters übergeben.

konst [searchParams, setSearchParams] = useSearchParams({});
konst value = searchParams.get('Schild')

Um alle Abfrageparameter abzurufen, verwenden Sie searchParams.entries().

konst [searchParams, setSearchParams] = useSearchParams({});
konst Werte = searchParams.entries()

Diese Methode gibt einen Iterator zurück, den Sie mithilfe von Schlüssel/Wert-Paaren iterieren können.

für (konst [Schlüsselwert] von Werte) {
Konsole.Protokoll(`${Schlüssel}, ${Wert}`);
}

Die Schlüssel/Wert-Paare befinden sich in der Reihenfolge, in der sie in der URL erscheinen.

Verwenden Sie Abfrageparameter, um die gemeinsame Nutzung von Suchergebnissen zu verbessern

Der Hook useSearchParams eignet sich hervorragend zum Speichern von Suchwerten oder anderen Daten als Abfrageparameter in einer URL.

Sie können Suchwerte auch mit dem useState-Hook nachverfolgen, aber das Speichern in einem Abfrageparameter bedeutet, dass Personen sie über die URL teilen können.