Load or display a resource by ID
A component renders content for a dynamic URL such as /posts/$postId.
TanStack · Hook
useParams
useParams returns parsed path parameters from the closest route match and its parents. Options can scope the route or select a derived result.
How it works
useParams reads path parameters from the closest matched route and its parent matches. You can constrain it to a route with from, derive a smaller value with select, or use strict: false when accessing parameters from an ambiguous location.
Syntax
useParams<TSelected = TAllParams>(opts?: { from?: TFrom; select?: (params: TAllParams) => TSelected; strict?: boolean; structuralSharing?: boolean }): TSelectedParameters
| Name | Type | Description |
|---|---|---|
opts | object | Optional route and selection configuration, including from, select, strict, and structuralSharing. |
Returns
The matched route and parent path-parameter object, or the value returned by select.
Key points
- The hook reads parameters from the nearest matched route.
- Parameters from every parent match are included as well.
- Configuration is supplied through an optional options object.
- Use from to bind parameter access to a specific route path.
- select can project the full parameter object to one value.
- The return type is either the parameter object or the selector's result.
Common mistakes
- When calling useParams outside a route-specific context, set strict to false because the location is ambiguous.
- A select result can affect re-rendering; the selected value is compared with shallow equality.
Example: Read a route parameter
import { createRoot } from 'react-dom/client'
import { createRouter, RouterProvider, Route } from '@tanstack/react-router'
const postRoute = new Route({
getParentRoute: () => rootRoute,
path: '/posts/$postId',
component: Post,
})
function Post() {
const params = postRoute.useParams()
return <p>Post: {params.postId}</p>
}
const router = createRouter({ routeTree: rootRoute.addChildren([postRoute]) })
createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />)The route-bound hook reads the typed postId value from the /posts/$postId path.
When to use it
Read params from an ambiguous location
A shared component needs route parameters without a single statically known route.
Select a focused value
A component needs one parameter rather than the complete parameter object.
Interview questions
QWhat does useParams return?
useParams returns the path parameters parsed for the closest match together with parameters from its parent matches. The result is the complete parameter object unless select transforms it.
Follow-up: How would you read only one parameter? Pass select, such as select: params => params.postId, and use the returned selected value.
QHow do you make useParams type-safe for a particular route?
Use the from option to identify the route whose parameters should be read, for example { from: '/posts/$postId' }. This gives the hook route-specific type information.
Follow-up: What if the component is not associated with one route? Use strict: false to access parameters from an ambiguous location.
QWhat is the purpose of select?
The hook accepts an optional select function that receives the parameter object and returns a derived value. That returned value becomes the hook result and participates in shallow-equality re-render checks.
Follow-up: When should select be used? Use it when a component needs only a subset or computed view of the route parameters.
Related
Path ParamsRouteApiRoute.useParamsuseSearchuseLoaderData