Jak zaktualizować parametry zapytania w React

Parametry zapytania to pary nazwa/wartość, które można dodać na końcu adresu URL. Umożliwiają przechowywanie danych pod tym adresem URL.

Jednym z praktycznych zastosowań parametrów zapytania jest przechowywanie wartości z wyszukiwania użytkownika.

Używanie React Router do aktualizacji parametrów zapytania

Gdy użytkownik wprowadza zapytanie do paska wyszukiwania, należy zapisać to zapytanie w adresie URL. Na przykład, jeśli użytkownik przeszukiwał listę blogów w poszukiwaniu postów z kategorii „reaguj”, zaktualizowany adres URL powinien wyglądać następująco: /posts?tag=react .

React udostępnia hak useSearchParams, który pomaga czytać lub aktualizować ciągi zapytań.

Aby rozpocząć, utwórz pasek wyszukiwania w App.js.

import { useState } from "react";
export default function App() {
  const [query, setquery] = useState('')
  const handleChange = (e) => {
    setquery(e.target.value)
  };
  return (
    <div>
      <form role="search">
        <input onChange={handleChange} value={query} type="search" />
      </form>
    </div>
  );
}

Pamiętaj, aby postępować zgodnie z najlepszymi praktykami podczas korzystania z React, aby jak najlepiej je wykorzystać.

Następnie zainstaluj router React i dodaj routing do swojej aplikacji. Jest to konieczne, aby hak useSearchParams działał.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);


Teraz możesz zapisywać zapytania w adresie URL w miarę wpisywania przez użytkownika, modyfikując funkcję handleChange().

import { useState } from "react";
import { useSearchParams } from "react-router-dom";


export default function App() {
  const [query, setquery] = useState("");
  const [searchParams, setSearchParams] = useSearchParams({});

  const handleChange = (e) => {
    setSearchParams({ query: e.target.value });
    setquery(e.target.value);
  };
  return (
    <div>
      <form role="search">
        <input onChange={handleChange} value={query} type="search" />
      </form>
    </div>
  );
}


Pobieranie wartości zapytania z adresu URL

Możesz uzyskać pojedynczą wartość zapytania, używając searchParams.get() i przekazując nazwę parametru zapytania.

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


Aby uzyskać wszystkie parametry zapytania, użyj searchParams.entries().

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


Ta metoda zwraca iterator, który można iterować przy użyciu par klucz/wartość.

for (const [key, value] of values) {
    console.log(`${key}, ${value}`);
}


Pary klucz/wartość są ułożone w kolejności, w jakiej pojawiają się w adresie URL.

Użyj parametrów zapytania, aby poprawić udostępnianie wyników wyszukiwania

Hak useSearchParams doskonale nadaje się do przechowywania wartości wyszukiwania lub innych danych jako parametrów zapytania w adresie URL.

Możesz także śledzić wartości wyszukiwania za pomocą haka useState, ale przechowywanie ich w parametrze zapytania oznacza, że ​​ludzie mogą je udostępniać za pośrednictwem adresu URL.