TanStack / router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://tanstack.com/router
MIT License
7.8k stars 572 forks source link

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

Closed EdoAPP closed 2 months ago

EdoAPP commented 2 months ago

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

Additional context

No response

benweier commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

Wonderful! Looking forward to it being released