Enviar e receber estados com useLocation §

---

O hook useLocation pode ser usado em conjunto com o método navigate para enviar e receber estados entre diferentes rotas. O método navigate é fornecido pelo React Router DOM para navegar para outras rotas de forma programática.

Enviar estado para uma nova rota §

import { useNavigate } from 'react-router-dom';
 
function ComponenteOrigem() {
  const navigate = useNavigate();
 
  const handleClick = () => {
    const estado = { dados: 'alguns dados' };
    navigate('/rota-destino', { state: estado });
  };
 
  return (
    <button onClick={handleClick}>
      Ir para Rota Destino com Estado
    </button>
  );
}

Receber estado na rota destino usando useLocation §

import { useLocation } from 'react-router-dom';
 
function RotaDestino() {
  const location = useLocation();
 
  // Verificar se há um estado enviado
  const estadoRecebido = location.state;
 
  return (
    <div>
      <h2>Rota Destino</h2>
      {estadoRecebido && (
        <p>Dados Recebidos: {estadoRecebido.dados}</p>
      )}
    </div>
  );
}

Ao usar navigate para direcionar a aplicação para uma nova rota, você pode passar um objeto de estado como segundo argumento. Em seguida, na rota de destino, o hook useLocation pode ser utilizado para acessar esse estado.

Referências §

---

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