Obtendo Parâmetros Da URL Com React

Assim como expliquei neste post, o React nos permite fazer o mesmo de uma maneira extremamente simples
Podemos obter os parâmetros enviados pela URL usando o nosso querido props!

Vamos começar configurando a nossa rota, para informarmos qual vai ser a nossa variável em nossa URL:

Em nosso arquivo onde definimos a navegação das rotas de nossa aplicação, devemos adicionar uma variável, que configuramos usando :nomeVariavel
No exemplo abaixo, a nossa rota movie recebe uma variável chamada id:

1
2
3
<Route path="/movie/:id">
<Movie />
</Route>

Desta forma, o React irá entender que precisamos passar alguma informação após a string movie!
Muito bem, feito isso podemos acessar então a nossa variável, no componente desta página!

Em nosso componente, precisamos ter acesso ao props e com ele, tudo já está disponível para usarmos!
Então, para acessarmos o parâmetro ID pela URL, podemos acessar da seguinte maneira:

1
2
3
4
5
const fetchMovieById = () => {
// Usamos essa propriedade para acessar
// a variável vinda pela URL!
const movieId = props.match.params.id;
}

Temos acesso facilmente através de props.match.params e passamos o nome da variável que configuramos pela URL!