Skip to content

When validateSearch overrides search param, lazy route won't load #1814

@EdoAPP

Description

@EdoAPP

Describe the bug

When a validateSearch function gets executed and overrides a search param, the lazy loaded components for that route won't render.

With the following code:

/test/route.tsx

export const Route = createFileRoute('/test')({
  validateSearch: z.object({
    status: z.enum(['one', 'two', 'three']).catch('one'),
  }),
});

/test/route.lazy.tsx

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

export const Route = createLazyFileRoute('/test')({
  component: TestComponent,
});

function TestComponent() {
  const { status } = Route.useSearch();

  return <div>Hello from test with {status}</div>;
}

If I try to manually update the status query param for a value that is not within the enum set. E.g: ?status=four, validateSearch will catch the error and set it to 'one' but the route.lazy.tsx won't be rendered.

I created the following snippet. https://stackblitz.com/edit/tanstack-router-4bpt3z?file=src%2Froutes%2Ftest%2Froute.lazy.tsx

Your Example Website or App

https://tanstackrouter4bpt3z-j5cp--3001--dc4d7514.local-credentialless.webcontainer.io/test?status=one

Steps to Reproduce the Bug or Issue

  1. Go to https://tanstackrouter4bpt3z-j5cp--3001--dc4d7514.local-credentialless.webcontainer.io/test?status=one
  2. Change status query param from one to four
  3. the content of the /test route won't show up.

Expected behavior

Expected behaviour would be to render the route.lazy.tsx component.

Screenshots or Videos

No response

Platform

  • OS: macOS
  • Browser: Chrome
  • @tanstack/react-router: 1.38.1

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions