T
TanStack•13mo ago
helpful-purple

Type safety for search params when the `from` option is not provided

I have the following route with validateSearch 
export const Route = createFileRoute('/dashboard')({
  component: Dashboard,
  validateSearch: (search: Record<string, unknown>): PaginationState => ({
    pageIndex: Number(search.pageIndex),
    pageSize: Number(search.pageSize),
  }),
});
export const Route = createFileRoute('/dashboard')({
  component: Dashboard,
  validateSearch: (search: Record<string, unknown>): PaginationState => ({
    pageIndex: Number(search.pageIndex),
    pageSize: Number(search.pageSize),
  }),
});
In a reusable component I want to get access to search params for a specific route. Doing the following just works fine. 
const { pageIndex, pageSize } = useSearch({ from: '/dashboard' });
const { pageIndex, pageSize } = useSearch({ from: '/dashboard' });
However, since it's a component, I don't want to hard code {from: '/dashboard'} But if I pass a prop which can be one of the routes, let's say /dashboard and /about then TS cannot know which route I am using this component with. So I ended up doing the following 
const { pageIndex, pageSize } = useSearch({ strict: false });
const { pageIndex, pageSize } = useSearch({ strict: false });
Where I get all the search params, not the ones specific o a route, and they can also be undefined. Same limitation applies to useNavigate and search prop on <Link/> component. Is this the intended way of accessing search params in that situation? Or, is there a better way?
1 Reply
optimistic-gold
optimistic-gold•13mo ago
what does this mean?
But if I pass a prop which can be one of the routes, let's say /dashboard and /about then TS cannot know which route I am using this component with Is this the intended way of accessing search params in that situation? Or, is there a better way?
well, how would there be a better way? if you are not telling router where you are on, you can only get all params in a possibly undefined state

Did you find this page helpful?