Von Maria Gathoni

Erstellen Sie eine benutzerfreundliche App, indem Sie Abfrageparameter nutzen.

Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

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.

instagram viewer

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.

Abonniere unseren Newsletter

Kommentare

AktieTwitternAktieAktieAktie
Kopieren
Email
Aktie
AktieTwitternAktieAktieAktie
Kopieren
Email

Link in die Zwischenablage kopiert

Verwandte Themen

  • Programmierung
  • Programmierung
  • Reagieren
  • Web Entwicklung
  • JavaScript

Über den Autor

Maria Gathoni (70 veröffentlichte Artikel)

Mary ist angestellte Autorin bei MUO in Nairobi. Sie hat einen B.Sc. in Angewandter Physik und Informatik, arbeitet aber lieber im technischen Bereich. Seit 2020 programmiert und schreibt sie Fachartikel.