useParams useParams: Lê Parâmetros de Rota

Última atualização: 2026-11-03

useParams useParams: Lê Parâmetros de Rota

O useParams retorna um objeto com os segmentos dinâmicos da rota atualmente correspondente: quando uma rota é escrita como /users/:id, visitar /users/42 lhe dá { id: '42' }. Páginas de detalhe e de edição dependem dele para saber qual registro estão exibindo, então a própria URL conduz o conteúdo. Lembre-se de que um parâmetro é sempre uma string, então compare com Number(id) antes de fazer verificações numéricas.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

import { useParams } from 'react-router-dom'

// Route: <Route path="/users/:id" element={<UserDetail />} />
function UserDetail() {
  const { id } = useParams()        // { id: '42' }, note that it is a string
  const user = users.find(u => u.id === id)
  return <h1>User {user?.name}</h1>
}

Retorna：Um objeto cujas chaves são os nomes de parâmetros declarados com : na rota e cujos valores são os segmentos reais da URL (strings, por exemplo, { id: '42' }).

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Clicar em "Visitar /users/2" muda o parâmetro para 2 e a página mostra Bob — o mesmo efeito de useParams lendo um segmento dinâmico da URL (demonstração simulada).

💡 Pontos-chave

🏷️ Mais Roteamento e Estado

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós