Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Como passar e capturar mais de um parâmetro com o hook useParams()?

Olá!

Nessa aula, aprendemos a utilizar um seletor na prop path de um componente <Routes /> e capturar esse seletor utilizando o hook useParams():

<Route path="posts/:id" element={<Post />} />

// em algum outro arquivo...
const parametros = useParams();
console.log(parametros.id)

Por favor, poderiam informar como deveria ser o seletor em <Route /> para conseguir passar mais de um parâmetro pela URL?

Por exemplo, se minha URL fosse algo do tipo "post/secao=2&id=5", como eu utilizaria o useParams() para capturar esses dois parâmetros (secao e id)?

Obrigado.

4 respostas

Cara acredito se vc usar parametros.secao e parametros.id deve funcionar

solução!

Oi, Matheus, tudo bem?

Bom, há duas formas de passar informações pela URL do navegador, uma delas é a que você já conhece, que é utilizando o seletor :nomeDoParametro no Route do React Router. Os parâmetros passados dessa forma se chamam route params, ou parâmetros de rota. Para passar mais de um, você pode escrever algo asssim:

<Route path="posts/:id/:secao" element={<Post />} />

// No componente Post:
const parametros = useParams();
console.log(parametros.id, parametros.secao)

E, na hora de escrever a URL no navegador, você pode passar algo como http://localhost:3000/posts/5/3. Assim, o parâmetro id terá o valor 5 e o parâmetro secao terá o valor 3.

A outra forma de passar informações pela URL é utilizando query params, ou parâmetros de busca, que se assemelha à forma que você escreveu. Na hora de escrever a URL no navegador, poderá ser passado algo como http://localhost:3000/posts?id=5&secao=3, mas o caminho do Route no React Router fica apenas posts:

<Route path="posts" element={<Post />} />

E, no componente Post, você irá utilizar um hook do React Router chamado useSearchParams, da seguinte forma:

    const [searchParams, setSearchParams] = useSearchParams();

    console.log(searchParams.get('id'), searchParams.get('secao'));

A constante searchParams acima funciona da mesma forma que um objeto do tipo URLSearchParams, que é nativo do JavaScript (note que é necessário utilizar métodos como o get() para obter um parâmetro, por exemplo). Você pode ler mais sobre o useSearchParams na documentação do React Router.

Os parâmetros de busca são mais comuns para realizar buscas e filtros de resultados, por exemplo. Para renderizar conteúdos como posts diferentes, costuma-se utilizar mais os parâmetros de rota.

Espero ter ajudado! Abraços e bons estudos :)

Ahh, agora eu entendi por que alguns sites usam \ ao invés de & nas URLs!

Valeu Antônio, gostei bastante do seu curso e do feedback que você dá ao pessoal no fórum. Parabéns!

Opa, Matheus, obrigado! Fico feliz que tenha gostado do curso. Qualquer dúvida estamos à disposição :)