Route validators (params/search) when using TanStack Start

Hey guys, recently started using TanStack Start, amazing so far but encountered this quirk, I'm having a bit of trouble with route validators for params and search. When navigating within the app everything works as expected (same as using router on client apps only) but when paired with start i encountered an issue when entering the page from outside or just refreshing then the validators wont work, here is a short code to demonstrate.

// posts.$id.tsx
export const Route = createFileRoute('/posts/$id')({
  params: z.object({
    id: z.coerce.number().int().positive().min(1).max(10),
  }),
  validateSearch: z.object({
    sort: z
      .enum(['asc', 'desc'], { message: 'Sort must be either asc or desc' })
      .default('asc'),
  }),
  errorComponent: ({ error }) => <div>route error: {error.message}</div>,
  component: RouteComponent,
})

function RouteComponent() {
  const { id } = Route.useParams()
  const { sort } = Route.useSearch()

  return (
    <div>
      Hello Post ID: {id} / SORT: {sort}
      <Link to="/posts">Go Back</Link>
    </div>
  )
}

// posts.$id.tsx
export const Route = createFileRoute('/posts/$id')({
  params: z.object({
    id: z.coerce.number().int().positive().min(1).max(10),
  }),
  validateSearch: z.object({
    sort: z
      .enum(['asc', 'desc'], { message: 'Sort must be either asc or desc' })
      .default('asc'),
  }),
  errorComponent: ({ error }) => <div>route error: {error.message}</div>,
  component: RouteComponent,
})

function RouteComponent() {
  const { id } = Route.useParams()
  const { sort } = Route.useSearch()

  return (
    <div>
      Hello Post ID: {id} / SORT: {sort}
      <Link to="/posts">Go Back</Link>
    </div>
  )
}

I navigate to the route within the app via Link component or navigate etc, everything works fine.

<Link to="/posts/$id" params={{ id: 5 }} search={{ sort: 'asc' }}>

<Link to="/posts/$id" params={{ id: 5 }} search={{ sort: 'asc' }}>

Page loads as expected - works same for client router only and for start, when I navigate to not match the validator via Link/navigate.

<Link to="/posts/$id" params={{ id: 5 }} search={{ sort: 'abc' }}>

<Link to="/posts/$id" params={{ id: 5 }} search={{ sort: 'abc' }}>

Again page loads and throws validator error on both start and if runing rounter on client only.

The actual issue happens when using tanstack staart and refreshing the page or entring the page with a url from outside the app for the route with wrong params/search. The validators wont trigger and the page will be shown normally (with wrong param/search). It's probably got to do something with SSR. Sometimes the error will flash for a 100ms or so and go back to display the page without validating params/search.

Anyone know of a solution for this? I tried some workarounds with redirecting in onError in route, or messing around with using notFound() in validators but it wasnt consistent and triggered some other issues.

Thanks.

TanStack•13mo ago•

10 replies

clean-aquamarine

Route validators (params/search) when using TanStack Start

// posts.$id.tsx
export const Route = createFileRoute('/posts/$id')({
  params: z.object({
    id: z.coerce.number().int().positive().min(1).max(10),
  }),
  validateSearch: z.object({
    sort: z
      .enum(['asc', 'desc'], { message: 'Sort must be either asc or desc' })
      .default('asc'),
  }),
  errorComponent: ({ error }) => <div>route error: {error.message}</div>,
  component: RouteComponent,
})

function RouteComponent() {
  const { id } = Route.useParams()
  const { sort } = Route.useSearch()

  return (
    <div>
      Hello Post ID: {id} / SORT: {sort}
      <Link to="/posts">Go Back</Link>
    </div>
  )
}

// posts.$id.tsx
export const Route = createFileRoute('/posts/$id')({
  params: z.object({
    id: z.coerce.number().int().positive().min(1).max(10),
  }),
  validateSearch: z.object({
    sort: z
      .enum(['asc', 'desc'], { message: 'Sort must be either asc or desc' })
      .default('asc'),
  }),
  errorComponent: ({ error }) => <div>route error: {error.message}</div>,
  component: RouteComponent,
})

function RouteComponent() {
  const { id } = Route.useParams()
  const { sort } = Route.useSearch()

  return (
    <div>
      Hello Post ID: {id} / SORT: {sort}
      <Link to="/posts">Go Back</Link>
    </div>
  )
}

I navigate to the route within the app via Link component or navigate etc, everything works fine.

<Link to="/posts/$id" params={{ id: 5 }} search={{ sort: 'asc' }}>

<Link to="/posts/$id" params={{ id: 5 }} search={{ sort: 'asc' }}>

Page loads as expected - works same for client router only and for start, when I navigate to not match the validator via Link/navigate.

<Link to="/posts/$id" params={{ id: 5 }} search={{ sort: 'abc' }}>

<Link to="/posts/$id" params={{ id: 5 }} search={{ sort: 'abc' }}>

Route validators (params/search) when using TanStack Start

Route validators (params/search) when using TanStack Start

Similar Threads

Similar Threads

Similar Threads