correct-apricot

How to put default search params?

import { createLazyFileRoute } from '@tanstack/react-router'


export const Route = createLazyFileRoute('/playground/')({
  component: () => <div><h1>Playground</h1></div>,
})

import { createLazyFileRoute } from '@tanstack/react-router'


export const Route = createLazyFileRoute('/playground/')({
  component: () => <div><h1>Playground</h1></div>,
})

3 Replies

other-emerald•2y ago

can you please explain more?

rising-crimson•2y ago

I think you could do something like this:

export const Route = createFileRoute('/_area-reservada/area-reservada/gestao-sub-registo/credenciacoes')({
  component: () => <ListAccreditationOfAllSubRegisterControlPostsPage />,
  validateSearch: (search: Record<string, unknown>): CredenciacaoCriteria => {
    return {
      page: 0,
      size: 10,
      ...search
    }
  },
});

export const Route = createFileRoute('/_area-reservada/area-reservada/gestao-sub-registo/credenciacoes')({
  component: () => <ListAccreditationOfAllSubRegisterControlPostsPage />,
  validateSearch: (search: Record<string, unknown>): CredenciacaoCriteria => {
    return {
      page: 0,
      size: 10,
      ...search
    }
  },
});

You can go even further if you want to add validations with zod, Jack explain if here https://youtu.be/qOwnQJOClrw?si=OHx-M1oLpbeEE3_Y&t=303

Jack Herrington

YouTube

Is Tanstack Router Better Than React-Router?

Tanstack Router is an amazing new router from Tanner Linsley, the creator of react-query. It has file based typesafe routing, streaming, and so much more, let's dig in! 💻 Code: https://github.com/jherr/tanstack-router-streaming-movies 👉 Upcoming NextJS course: https://pronextjs.dev 👉 Don't forget to subscribe to this channel for more updates: ...

dependent-tan•2y ago

Hello Davi, On which version are you ?

Gaming

Programming

How to put default search params?

Did you find this page helpful?