understand lazy route with validateSearch

GlobalFishingWatch · Jun 6, 2024 · 65fd665 · 65fd665
1 parent 33befcd
commit 65fd665
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/apps/image-labeler/src/routeTree.gen.ts b/apps/image-labeler/src/routeTree.gen.ts
@@ -29,7 +29,9 @@ const IndexLazyRoute = IndexLazyImport.update({
 const ProjectProjectIdRoute = ProjectProjectIdImport.update({
   path: '/project/$projectId',
   getParentRoute: () => rootRoute,
-} as any)
+} as any).lazy(() =>
+  import('./routes/project.$projectId.lazy').then((d) => d.Route),
+)
 
 // Populate the FileRoutesByPath interface
 

diff --git a/apps/image-labeler/src/routes/project.$projectId.lazy.tsx b/apps/image-labeler/src/routes/project.$projectId.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from '@tanstack/react-router'
+import TasksComponent from '../features/project/Project'
+
+export const Route = createLazyFileRoute('/project/$projectId')({
+  component: TasksComponent,
+})
diff --git a/apps/image-labeler/src/routes/project.$projectId.tsx b/apps/image-labeler/src/routes/project.$projectId.tsx
@@ -1,12 +1,10 @@
 import { createFileRoute } from '@tanstack/react-router'
-import TasksComponent from '../features/project/Project'
 
 type ProjectSearchState = {
   activeTaskId?: string
 }
 
 export const Route = createFileRoute('/project/$projectId')({
-  component: TasksComponent,
   validateSearch: (search: Record<string, unknown>): ProjectSearchState => {
     // validate and parse the search params into a typed state
     return {