#Nested folder routes

4 messages · Page 1 of 1 (latest)

spare breach
#

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),
)
image.png
spare breach
#

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

marble comet
#

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/
  ...