createLazyFileRoute function doesn't have validateSearch property

[skaionedev]

Describe the bug

I can't use validateSearch property for lazy file routes as it's for regular file routes

Steps to Reproduce the Bug or Issue

1. create a fresh vite + react app with router
2. create lazy file route (e.g. about.lazy.tsx)

Expected behavior

I expect lazy file routes have same properties as regular file routes

Platform

• OS: macOS
• Browser: Brave
• Version: 1.62.165

Additional context

No response

[SeanCassiere]

The createLazyFileRoute helper is meant to be used for routes that are being code-split. For example src/routes/about.lazy.tsx. This configuration only lets you define the components for a specific Route that are then imported at runtime using code-splitting.

When you need to define the Route configuration (such as configuring the loader, beforeLoad, validateSearch, etc.), it is done in a separate file which would be named as src/routes/about.tsx. In here, you would use the createFileRoute helper to define the Route configuration itself.

import { createFileRoute } from '@tanstack/react-router'
import { z } from 'zod'
export const Route = createFileRoute("/about")({
  validateSearch: (search) => z.object({ foo: z.string().catch("bar") }).parse(search)
});

TLDR; You'll need both about.lazy.tsx AND about.tsx if you want the about route to be code-split whilst utilizing the extensible Route configuration.

Edit: You can see this in action in the Basic (file based) example in the posts.tsx and the posts.lazy.tsx files.

[ShellWen]

It should be pinned, lots of developers are very confused about this feature.

[SeanCassiere]

It should be pinned, lots of developers are very confused about this feature.

This has been stated in docs over here, but it's easy to understand why someone could miss it. Tanstack Router covers a lot, and the fact that virtual routes "just work" means people don't see fully read the page on code-splitting and how it works.

IMO: Tanstack Router is definitely not the most beginner friendly solution at the moment, and honestly I don't think it ever will be given the kinds of complex stuff it aims to do.

But we should see alot of the documentation pages getting a cleanup when we begin the push for v2.

[skaionedev]

@SeanCassiere Thank you 🙏