Pesquisa de site

Como atualizar parâmetros de consulta no React


Crie um aplicativo fácil de usar aproveitando os parâmetros de consulta.

Parâmetros de consulta são pares nome/valor que você pode adicionar ao final de uma URL. Eles permitem que você armazene dados nesse URL.

Uma aplicação prática dos parâmetros de consulta é armazenar valores da pesquisa de um usuário.

Usando React Router para atualizar parâmetros de consulta

Quando um usuário insere uma consulta em uma barra de pesquisa, você deve armazenar essa consulta no URL. Por exemplo, se um usuário pesquisou postagens na categoria “react” em uma lista de blogs, o URL atualizado deverá ser semelhante a este: /posts?tag=react.

React fornece o gancho useSearchParams que ajuda você a ler ou atualizar strings de consulta.

Para começar, crie uma barra de pesquisa em 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>
  );
}

Lembre-se de seguir as práticas recomendadas ao usar o React para aproveitá-las ao máximo.

Em seguida, instale o roteador React e adicione roteamento ao seu aplicativo. Isso é obrigatório para que o gancho useSearchParams funcione.

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>
);

Agora você pode salvar as consultas na URL conforme o usuário digita, modificando a função 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>
  );
}

Obtendo os valores de consulta do URL

Você pode obter um único valor de consulta usando searchParams.get() e passando o nome do parâmetro de consulta.

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

Para obter todos os parâmetros de consulta, use searchParams.entries().

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

Este método retorna um iterador que você pode iterar usando pares chave/valor.

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

Os pares chave/valor estão na ordem em que aparecem no URL.

Use parâmetros de consulta para melhorar o compartilhamento dos resultados da pesquisa

O gancho useSearchParams é ótimo para armazenar valores de pesquisa ou quaisquer outros dados como parâmetros de consulta em um URL.

Você também pode acompanhar os valores de pesquisa com o gancho useState, mas armazená-los em um parâmetro de consulta significa que as pessoas podem compartilhá-los por meio da URL.

Artigos relacionados: