T
TanStack•2y ago
firm-tan

no validateSearch in createLazyFileRoute

Is there no search params functionality for lazy load component? I'm using v1.12.2
2 Replies
rival-black
rival-black•2y ago
Your routes are split based on the critical and non-critical configurations. https://tanstack.com/router/v1/docs/guide/code-splitting As such, you'll have the following two files for codesplitting or just the first file if you don't want to split. 
// src/routes/index.route.tsx
// This is a critical configuration file.
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
  beforeLoad: () => {},
  validateSearch: (data) => validateSearch(data),
  loader: async () => {},
  // ...
})
// src/routes/index.route.tsx
// This is a critical configuration file.
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
  beforeLoad: () => {},
  validateSearch: (data) => validateSearch(data),
  loader: async () => {},
  // ...
})
// src/routes/index.route.lazy.tsx
// This is a non-critical configuration file.
import { createLazyFileRoute } from "@tanstack/react-router";

export const Route = createLazyFileRoute("/")({
  component: () => "Page",
  errorComponent: () => "Error",
  pendingComponent: () => "Pending"
})
// src/routes/index.route.lazy.tsx
// This is a non-critical configuration file.
import { createLazyFileRoute } from "@tanstack/react-router";

export const Route = createLazyFileRoute("/")({
  component: () => "Page",
  errorComponent: () => "Error",
  pendingComponent: () => "Pending"
})
And of course, if you don't want to bother with setting up a critical configuration and just want to show some UI, you can always use the Virtual Routes feature.
Code Splitting | TanStack Router Docs
Code splitting and lazy loading is a powerful technique for improving the bundle size and load performance of an application. Reduces the amount of code that needs to be loaded on initial page load
rival-black
rival-black•2y ago
Remember that the new code-splitting paradigm can work alongside the old way of doing things. Currently, the old way is just marked as deprecated and has not actually been removed. That'll happen in v2. So you can incrementally migrate your routes till the next major update.

Did you find this page helpful?