TanStackT
TanStack•17mo ago•
5 replies
conventional-black

Link component expects `search` prop when validateSearch is used in a route

export const Route = createFileRoute('/dashboard')({
  component: Dashboard,
  validateSearch: (search: Record<string, unknown>): PaginationState => ({
    pageIndex: Number(search.pageIndex) || 0,
    pageSize: Number(search.pageSize) || 10,
  }),
});


This is my /dashboard route. It works as expected with typings. However, <Link to="/dashboard"> expects me to provide search={{pageIndex: 0, pageSize: 10}} prop. I understand that this is because PaginationState is the following.

const PaginationState: {
  pageIndex: number;
  pageSize: number;
}


I could do Partial<PaginationState>, but then parsing those search params with const searchParams = useSearch({ from: '/dashboard' }); results in potentially undefined params.

Basically I want to avoid providing search prop with initial values every time I link to /dashboard. Because if I don't provide these values, the fallback values in the 
validateSearch
 will apply. So, even if someone directly visits /dashboard route, it will update the url as /dashboard?pageIndex=0&pageSize=10.

Am I missing something here?
Was this page helpful?