Rotas com parâmetros e Query String §

---

Para utilizar parâmetros de URL e Query String em rotas criadas com o React Router DOM, você pode utilizar os hooks useParams e useSearchParams. O useParams é utilizado para acessar os parâmetros de URL definidos na rota, enquanto o useSearchParams é utilizado para acessar os parâmetros de Query String.

Por exemplo, para acessar um parâmetro de URL em uma rota, você pode definir a rota com um parâmetro dinâmico, como /produto/:id, e em seguida, utilizar o hook useParams para acessar o valor do parâmetro na página de destino.

import { useParams } from 'react-router-dom';
 
function Produto() {
  const { id } = useParams();
 
  return (
    <div>
      <h1>Produto {id}</h1>
      {/* Conteúdo do produto */}
    </div>
  );
}

Neste exemplo, o hook useParams é utilizado para acessar o valor do parâmetro id definido na rota /produto/:id. O valor do parâmetro é então utilizado para renderizar o conteúdo do produto correspondente.

Para acessar parâmetros de Query String, você pode utilizar o hook useSearchParams. O código abaixo ilustra como isso pode ser feito:

import { useSearchParams } from 'react-router-dom';
 
function Busca() {
  const [searchParams, setSearchParams] = useSearchParams();
 
  function handleSearch(event) {
    event.preventDefault();
    const query = event.target.elements.query.value;
    setSearchParams({ q: query });
  }
 
  return (
    <div>
      <form onSubmit={handleSearch}>
        <input type="text" name="query" />
        <button type="submit">Buscar</button>
      </form>
      <p>Resultados para: {searchParams.get('q')}</p>
      {/* Resultados da busca */}
    </div>
  );
}

Neste exemplo, o hook useSearchParams é utilizado para acessar os parâmetros de Query String da URL. O valor do parâmetro q é então utilizado para renderizar os resultados da busca correspondente.

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado