Read shared route state
A route's beforeLoad or loader places authenticated-user data in context, and a descendant component needs to display it.
TanStack · Hook
useRouteContext
useRouteContext returns context for a specified current route. Use select to derive and return a narrower value.
How it works
useRouteContext reads the context belonging to the current route match. Pass the target route ID with from; optionally provide select to transform the context and receive only the selected value.
Syntax
useRouteContext({ from: string, select?: (context: RouteContext) => TSelected })Parameters
| Name | Type | Description |
|---|---|---|
opts.from | string | Required route ID used to identify the route context. |
opts.select | (context: RouteContext) => TSelected | Optional function receiving the route context and returning the value exposed by the hook. |
Returns
The current context for the current route, or the value returned by select when provided.
Key points
- The hook exposes context associated with the current route.
- Use it within a component that needs data placed in route context.
- Configuration is passed as one options object.
- The selector maps a RouteContext value to a selected result type.
- Without a selector it returns route context; with one it returns the selected result.
Common mistakes
fromis required and must identify the route whose context you want to read.- A selector receives the complete route context, so access valid properties for that route.
Example: Select a value from route context
import { useRouteContext } from '@tanstack/react-router'
export function UserBadge() {
const email = useRouteContext({
from: '/posts/$postId',
select: (context) => context.user.email,
})
return <span>{email}</span>
}Reads only the user's email from the context associated with the specified route.
When to use it
Select a narrow value
A component needs one context property rather than the complete context object.
Target a specific route
A route-aware component needs strongly identified context from a particular route ID.
Interview questions
QWhat does useRouteContext do?
It is a hook for reading the current route's context inside a component. The from option identifies the route context to use.
Follow-up: How can a component avoid consuming the whole context? Pass select and return only the needed property.
QWhat is the purpose of the from option?
from is a required string containing the RouteID to match. It tells the hook which route's context should be returned.
Follow-up: What happens if the route ID is omitted? The documented hook signature requires the option, so provide an explicit route ID.
QHow does select change the returned value?
select is optional and receives the route context object. Its return value becomes the hook's result, allowing a component to consume a derived value such as a user ID.
Follow-up: What type does the selected result have? It is the selector's return type, represented in the documentation as TSelected.
Related
Route.useRouteContextuseParamsuseSearchuseLoaderDatagetRouteApi