Queryparameters bijwerken in React

Queryparameters zijn naam/waarde-paren die u aan het einde van een URL kunt toevoegen. Hiermee kunt u gegevens in die URL opslaan.

Een praktische toepassing van queryparameters is het opslaan van waarden uit de zoekopdracht van een gebruiker.

React Router gebruiken om queryparameters bij te werken

Wanneer een gebruiker een zoekopdracht in een zoekbalk invoert, moet u die zoekopdracht in de URL opslaan. Als een gebruiker bijvoorbeeld in een lijst met blogs heeft gezocht naar berichten in de categorie 'reageren', zou de bijgewerkte URL er als volgt uit moeten zien: /posts? taggen=reageren.

React biedt de useSearchParams-hook waarmee u queryreeksen kunt lezen of bijwerken.

Maak om te beginnen een zoekbalk in App.js.

importeren { useState } van"Reageer";
exporterenstandaardfunctieapp() {
const [query, setquery] = useState('')
const handleWijzigen = (e) => {
stelzoekopdracht(e.doel.waarde)
 };
opbrengst (
<div>
<formulierrol="zoekopdracht">
<invoeropWijzigen={handleChange}waarde={vraag}type="zoekopdracht" />
formulier>
div>
 );
}

Vergeet niet te volgen best practices bij het gebruik van React om er het maximale uit te halen.

Installeer vervolgens React-router en voeg routering toe aan uw applicatie. Dit is een must om de useSearchParams hook te laten werken.

importeren Reageer van"Reageer";
importeren ReactDOM van"react-dom/client";
importeren"./index.css";
importeren app van"./App";
importeren { BrowserRouter, Route, Routes } van"reageren-router-dom";
const root = ReactDOM.createRoot(document.getElementById("wortel"));
wortel.veroorzaken(
<Reageer. Strikte modus>
<BrowserRouter>
<Routes>
"/" element={} />
Routes>
BrowserRouter>
Reageer. Strikte modus>
);

Nu kunt u de query's in de URL opslaan terwijl de gebruiker typt door de functie handleChange() te wijzigen.

importeren { useState } van"Reageer";
importeren { gebruik SearchParams } van"reageren-router-dom";
exporterenstandaardfunctieapp() {
const [query, setquery] = useState("");
const [searchParams, setSearchParams] = useSearchParams({});
const handleWijzigen = (e) => {
setSearchParams({ vraag: e.doelwaarde });
stelzoekopdracht(e.doel.waarde);
 };
opbrengst (
<div>
<formulierrol="zoekopdracht">
<invoeropWijzigen={handleChange}waarde={vraag}type="zoekopdracht" />
formulier>
div>
 );
}

De querywaarden ophalen uit de URL

U kunt een enkele querywaarde verkrijgen door searchParams.get() te gebruiken en de naam van de queryparameter door te geven.

const [searchParams, setSearchParams] = useSearchParams({});
const waarde = searchParams.get('label')

Gebruik searchParams.entries() om alle queryparameters te krijgen.

const [searchParams, setSearchParams] = useSearchParams({});
const waarden = searchParams.entries()

Deze methode retourneert een iterator die u kunt herhalen met behulp van sleutel/waarde-paren.

voor (const [sleutel waarde] van waarden) {
troosten.log(`${sleutel}, ${waarde}`);
}

De sleutel/waarde-paren staan ​​in de volgorde waarin ze in de URL voorkomen.

Gebruik queryparameters om de deelbaarheid van zoekresultaten te verbeteren

De useSearchParams-hook is geweldig voor het opslaan van zoekwaarden of andere gegevens als queryparameters in een URL.

Je kunt ook zoekwaarden bijhouden met de useState-hook, maar als je ze opslaat in een queryparameter, kunnen mensen ze delen via de URL.