router icon indicating copy to clipboard operation
router copied to clipboard

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

Open EdoAPP opened this issue 1 year ago • 1 comments

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 avatar Jun 21 '24 21:06 EdoAPP

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.

benweier avatar Jun 30 '24 02:06 benweier

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

schiller-manuel avatar Jul 06 '24 20:07 schiller-manuel

Wonderful! Looking forward to it being released

benweier avatar Jul 07 '24 04:07 benweier