T
TanStack•12h ago
genetic-orange

Pathless Layout search params.

Are pathless layouts allowed to define/set search params for their child routes? I currently have a setup where the pathless layout contains the filter controls for a gallery, which is supposed to store the values in search params. however the search params keep flashing. pathless contains the validateSearch and search middleware, while the child tries to read search params from loaderdeps. Not sure if a bug, bad configuration or just not supported currently.
1 Reply
genetic-orange
genetic-orangeOP•12h ago
i see this in the docs Search Params are inherited from Parent Routes The search parameters and types of parents are merged as you go down the route tree, so child routes also have access to their parent's search params: 
shop.products.tsx
const productSearchSchema = z.object({
  page: z.number().catch(1),
  filter: z.string().catch(''),
  sort: z.enum(['newest', 'oldest', 'price']).catch('newest'),
})

type ProductSearch = z.infer<typeof productSearchSchema>

export const Route = createFileRoute('/shop/products')({
  validateSearch: productSearchSchema,
})
shop.products.$productId.tsx
export const Route = createFileRoute('/shop/products/$productId')({
  beforeLoad: ({ search }) => {
    search
    // ^? ProductSearch :white_check_mark:
  },
})
shop.products.tsx
const productSearchSchema = z.object({
  page: z.number().catch(1),
  filter: z.string().catch(''),
  sort: z.enum(['newest', 'oldest', 'price']).catch('newest'),
})

type ProductSearch = z.infer<typeof productSearchSchema>

export const Route = createFileRoute('/shop/products')({
  validateSearch: productSearchSchema,
})
shop.products.$productId.tsx
export const Route = createFileRoute('/shop/products/$productId')({
  beforeLoad: ({ search }) => {
    search
    // ^? ProductSearch :white_check_mark:
  },
})
but the behaviour doesnt seem to be replicated with a pathless layout as the parent

Did you find this page helpful?