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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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?