Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
EdoAPP opened this issue Jun 21, 2024 · 3 comments · Fixed by #1907
Closed

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

EdoAPP opened this issue Jun 21, 2024 · 3 comments · Fixed by #1907
Labels
bug Something isn't working

Comments

@EdoAPP
Copy link

EdoAPP commented Jun 21, 2024

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

@EdoAPP EdoAPP changed the title When validateSearch overrides search param, lazy components of that route won't load. Jun 21, 2024
@benweier
Copy link

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.

@schiller-manuel
Copy link
Contributor

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

@benweier
Copy link

benweier commented Jul 7, 2024

Wonderful! Looking forward to it being released

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
4 participants