TanStack•2y 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,
  }),
});

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

/dashboard

route. It works as expected with typings. However,

<Link to="/dashboard">

<Link to="/dashboard">

expects me to provide

search={{pageIndex: 0, pageSize: 10}}

search={{pageIndex: 0, pageSize: 10}}

prop. I understand that this is because

PaginationState

PaginationState

is the following.

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

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

I could do

Partial<PaginationState>

Partial<PaginationState>

, but then parsing those search params with

const searchParams = useSearch({ from: '/dashboard' });

const searchParams = useSearch({ from: '/dashboard' });

results in potentially undefined params.

Basically I want to avoid providing

search

search

prop with initial values every time I link to

/dashboard

/dashboard

. Because if I don't provide these values, the fallback values in the

validateSearch

validateSearch

will apply. So, even if someone directly visits

/dashboard

/dashboard

route, it will update the url as

/dashboard?pageIndex=0&pageSize=10

/dashboard?pageIndex=0&pageSize=10

.

Am I missing something here?

TanStack•2y 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,
  }),
});

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

/dashboard

route. It works as expected with typings. However,

<Link to="/dashboard">

<Link to="/dashboard">

expects me to provide

search={{pageIndex: 0, pageSize: 10}}

search={{pageIndex: 0, pageSize: 10}}

prop. I understand that this is because

PaginationState

PaginationState

is the following.

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

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

I could do

Partial<PaginationState>

Partial<PaginationState>

, but then parsing those search params with

const searchParams = useSearch({ from: '/dashboard' });

const searchParams = useSearch({ from: '/dashboard' });

results in potentially undefined params.

Basically I want to avoid providing

search

search

prop with initial values every time I link to

/dashboard

/dashboard

. Because if I don't provide these values, the fallback values in the

validateSearch

validateSearch

will apply. So, even if someone directly visits

/dashboard

/dashboard

route, it will update the url as

/dashboard?pageIndex=0&pageSize=10

/dashboard?pageIndex=0&pageSize=10

.

Am I missing something here?

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads