Default Search Params

Based on the documentation and the example projects, it seems like you should be able to set default search parameters either by returning a default parameter in validateSearch, or using a preSearchFilter.

For example if I have:

export const exampleRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "example",
  validateSearch: z.object({ 
    myParam: z.nativeEnum(["one", "two"]).default("one")
  })
  //...
});

export const exampleRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "example",
  validateSearch: z.object({ 
    myParam: z.nativeEnum(["one", "two"]).default("one")
  })
  //...
});

This should run before the route and child component render, so when using

// SomeComponment.tsx
const { myParam } = exampleRoute.useSearch();

// SomeComponment.tsx
const { myParam } = exampleRoute.useSearch();

It should be

"one"

"one"

by default, right?

I've also tried setting it in the preSearchFilters but am unable to get a default value to populate when navigating to the route with a Link component.

Does

useSearch()

useSearch()

actually run before

validateSearch

validateSearch

?

Edit: for clarification - I am able to set a default, but it doesn't get populated into the URL's search params. So the value in

myParam

myParam

is what I expect but the URL for the page looks wrong because nothing is populated for that param.

TanStack•3y ago•

6 replies

then-purple

Default Search Params

export const exampleRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "example",
  validateSearch: z.object({ 
    myParam: z.nativeEnum(["one", "two"]).default("one")
  })
  //...
});

export const exampleRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "example",
  validateSearch: z.object({ 
    myParam: z.nativeEnum(["one", "two"]).default("one")
  })
  //...
});

This should run before the route and child component render, so when using

// SomeComponment.tsx
const { myParam } = exampleRoute.useSearch();

// SomeComponment.tsx
const { myParam } = exampleRoute.useSearch();

It should be

"one"

"one"

by default, right?

I've also tried setting it in the preSearchFilters but am unable to get a default value to populate when navigating to the route with a Link component.

Does

useSearch()

useSearch()

actually run before

validateSearch

validateSearch

?

Edit: for clarification - I am able to set a default, but it doesn't get populated into the URL's search params. So the value in

myParam

myParam

is what I expect but the URL for the page looks wrong because nothing is populated for that param.

Default Search Params

Similar Threads

Default Search Params

Similar Threads

Similar Threads

Similar Threads