Enviando Parâmetros Através Do History Push - ReactJS

Enquanto estamos desenvolvendo aplicações com React, é comum usarmos o react-router-dom para navegação entre rotas.
Ele serve para quando necessitamos mudar de página, seja renderizado a nova página sem recarregar toda nossa aplicação!
Um dos benefícios que podemos extrair dessa lib é a capacidade de enviar dados através rotas para que o nosso outro componente tenha acesso!

Você já precisou passar parâmetros com o history.push?

Passar parâmetros pelo history é uma atividade muito simples a ser realizada!
Primeiramente, em nosso componente devemos instanciar o hook do history, de acordo com a nova versão da API:

import React from "react";
import { useHistory, Link } from "react-router-dom";

const Employees = () => {
  // Instanciamos o hook history
  const history = useHistory();

  const handleRequest = (string) => {
    history.push({
      pathname: `/funcionario/`,
      state: { text: string },
    });
  };

  return (
    <button type="button" onClick={() => handleRequest("Dado a ser enviado")}>
      Enviar dado
    </button>
  );
};

export default Employees;

Com isso, temos toda nossa estrutura do componente que irá enviar os dados para o outro.
A função handleRequest envia para a rota “funcionario” e juntamente ao pathname (a rota que queremos ser redirecionados) enviamos juntamente a propriedade state, que recebe a informação que desejamos acessar do outro lado!

Como receber o valor do outro lado

Para recebermos esse valor do outro lado, basta acessar via props!

import React, { useEffect, useState } from "react";

const Employee = (props) => {
  const [textInfo, setTextInfo] = useState("");

  useEffect(() => {
    // Aqui recebemos a informação.
    // Acessamos com o mesmo nome que
    // setamos no componente anterior
    setTextInfo(props.location.state.text);
  }, []);

  return <p>Texto enviado: {textInfo}</p>;
};

export default Employee;

Bem simples, não é mesmo?