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
- Go to https://tanstackrouter4bpt3z-j5cp--3001--dc4d7514.local-credentialless.webcontainer.io/test?status=one
- Change
status query param from one to four
- 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
Describe the bug
When a
validateSearchfunction gets executed and overrides a search param, the lazy loaded components for that route won't render.With the following code:
/test/route.tsx
/test/route.lazy.tsx
If I try to manually update the
statusquery param for a value that is not within the enum set. E.g:?status=four,validateSearchwill 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
statusquery param from one to fourExpected behavior
Expected behaviour would be to render the route.lazy.tsx component.
Screenshots or Videos
No response
Platform
Additional context
No response