Qual a diferença entre "params" e "routeParams" para Route Components (react-router 3.2)?

[igorthurow]

Fala galera!

O contexto é utilizando o react-router 3.2.

Estou em duvida sobre qual a diferença entre as props params e routeParams injetadas pelo React Router nos Route Components.

Achei pouquissima documentação tanto em inglês quanto em português, tipo: https://knowbody.github.io/react-router-docs/api/RouteComponents.html

A motivação da pergunta é que quando ocorre a mudança de rota, antes de desmontar meu componente em questão, os parâmetros persistem em routeParams mas não em params, que se torna os parâmetros da URL da nova rota mesmo antes de desmontar o Route Component.

Fluxo de exemplo:

1. Renderizou o componente:

routeParams // { id:  123 }
params // { id: 123 }

2. Navegou pra outra rota, de forma a desmontar meu componente

//Segundos antes de desmontar:
routeParams // { id: 123 }
params // { searchText: any }

Me parece que params sempre se refere a rota atual, independente do componente que está usando, enquanto routeParams é especifico do componente que a está usando. É isso?

[evelew]

Oi Igor, pelo que entendi o params lista todos os dados da URL, e o routeParams lista apenas os dados dinâmicos que foram colocados na configuração do path dessa rota.

Por exemplo, vc definiu seu path como: users/:userId e acessou a página users/12/photoId/2
Quando acessar o routeParams vai ter acesso apenas ao userId, mas quando acessar o params vai ter acesso ao userId e ao photoId.

[igorthurow]

@evelew Oi Evellyn!

Muito obrigado pelo seu comentário! Eu tinha entendido mais ou menos isso também, mas fiquei na dúvida.

Esse exemplo que escrevi é um cenário real, que está ocorrendo comigo e estou tentando entender se este comportamento é esperado.

[evelew]

@igorthurow Ah entendi, acredito que seja o esperado sim.

No momento que o params muda pra { searchText: any } a rota ta sendo alterada né?

[igorthurow]

Isso, exatamente. Na hora que a rota muda de forma que meu componente irá desmontar, params muda para { searchText: any } enquanto routeParams mantém com o último dado recebido conforme configurado na prop path da rota, como vc falou :)

Acho que deve ser isso então 🤔