When `validateSearch` overrides search param, lazy route won't load
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
statusquery 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
Can confirm I am encountering this issue in my application.
I was looking into #1656 why my loader was throwing a "context not defined" error when directly loading the URL without any search params, but it worked fine when using Link to navigate to the same URL without any search params. Disabling validateSearch stopped the error being thrown but obviously lost search param validation... This hint that "rewriting" invalid search params causes the route to not load made me check my validateSearch schema. I removed all fallback or manipulated values (e.g. forcing an undefined/non-number/negative page number value to "1") and the loader error is no longer being thrown.
this will be fixed by #1907
reproducer with the pre-release package: https://stackblitz.com/edit/tanstack-router-rcbzst?file=src%2Froutes%2Ftest%2Froute.lazy.tsx
Wonderful! Looking forward to it being released