In TanStack Router, search parameters defined on a parent route are automatically inherited by all child routes. Instead of re-declaring shared search parameters (like pagination or filters) in every child route, define them once in the parent route. This ensures type safety and prevents synchronization issues.
Key Rules:
- Define once: Declare shared params in the parent route using
validateSearch. - Inherit automatically: Child routes only need to define their own unique search parameters.
- Accessing parent params: Use
useSearch({ from: '/parent-path' }) to access specific parent search parameters with full type safety within a child component.
// routes/posts.tsx — defines shared search params once
export const Route = createFileRoute('/posts')({
validateSearch: z.object({
view: z.enum(['grid', 'list']).catch('grid'),
}),
})
// routes/posts.$postId.tsx — only defines its own search params
export const Route = createFileRoute('/posts/$postId')({
validateSearch: z.object({
tab: z.enum(['content', 'comments']).catch('content'),
}),
component: PostPage,
})
function PostPage() {
// tab from this route
const { tab } = Route.useSearch()
// view from parent
const { view } = useSearch({ from: '/posts' })
return <div>View: {view}, Tab: {tab}</div>
}
