useParams useParams Reads Route Params

Last updated: 2026-11-02

useParams useParams Reads Route Params

useParams returns an object with the dynamic segments of the currently matched route: when a route is written as /users/:id, visiting /users/42 gives you { id: '42' }. Detail pages and edit pages rely on it to know which record they are showing, so the URL alone drives the content. Remember that a param is always a string, so compare it with Number(id) before doing numeric checks.

ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.

📝 Syntax

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>
}

Returns：An object whose keys are the parameter names declared with : in the route and whose values are the actual URL segments (strings, e.g. { id: '42' }).

▶ Example

The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.

Output：

Clicking "Visit /users/2" changes the param to 2 and the page shows Bob - the same effect as useParams reading a dynamic segment of the URL (simulated demo).

💡 Key Points

🏷️ More Routing & State

💡 Related Cases

📚 Related Tutorials

❓ FAQ

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us