foreign-sapphire

Nested folder routes

The folder structure is in the image. When navigating to /projects/{projectId} I am seeing the page that's rendered on /projects. What am I missing? Why is the parent route of projectId in routeTree.gen.ts project and not root:

const ProjectsRouteRoute = ProjectsRouteImport.update({
  path: '/projects',
  getParentRoute: () => rootRoute,
} as any).lazy(() =>
  import('./routes/~projects/~route.lazy').then((d) => d.Route),
)

const ProjectsProjectIdRouteRoute = ProjectsProjectIdRouteImport.update({
  path: '/$projectId',
  getParentRoute: () => ProjectsRouteRoute,
} as any).lazy(() =>
  import('./routes/~projects/~$projectId/~route.lazy').then((d) => d.Route),
)

const ProjectsRouteRoute = ProjectsRouteImport.update({
  path: '/projects',
  getParentRoute: () => rootRoute,
} as any).lazy(() =>
  import('./routes/~projects/~route.lazy').then((d) => d.Route),
)

const ProjectsProjectIdRouteRoute = ProjectsProjectIdRouteImport.update({
  path: '/$projectId',
  getParentRoute: () => ProjectsRouteRoute,
} as any).lazy(() =>
  import('./routes/~projects/~$projectId/~route.lazy').then((d) => d.Route),
)

4 Replies

foreign-sapphireOP•2y ago

fixed by creating an ~index folder and putting the ~route.lazy.tsx and ~route.tsx from /projects in it

flat-fuchsia•2y ago

You could also simplify this a bit by using the routeFileIgnorePrefix on a directory instead. Like:

src/routes
  projects/
    -lib/ <-everything in here is ignored
      components/
      hooks/
    index.tsx
    route.tsx
  projects.$projectId/
    -lib/
  ...

src/routes
  projects/
    -lib/ <-everything in here is ignored
      components/
      hooks/
    index.tsx
    route.tsx
  projects.$projectId/
    -lib/
  ...

flat-fuchsia•2y ago

https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#options

TanStack Router Docs

foreign-sapphireOP•2y ago

i am already using the routeFilePrefix

Gaming

Programming

Nested folder routes

Did you find this page helpful?