TanStack / router

πŸ€– Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering.
https://tanstack.com/router
MIT License
7.27k stars 495 forks source link

Issue with nested params after updating to the latest release when prefixed with `_` #1289

Closed mgcrea closed 2 months ago

mgcrea commented 2 months ago

Describe the bug

I'm encountering an issue with a nested param that is incorrectly skipped in the latest release, the newly generated routeTree is incorrect (cf. regression diff below in the generated output):

diff --git a/src/config/routeTree.gen.ts b/src/config/routeTree.gen.ts
index 78f84d0..8410d2c 100644
--- a/src/config/routeTree.gen.ts
+++ b/src/config/routeTree.gen.ts
@@ -72,13 +72,13 @@ const PrivateProjectsProjectIdRoute = PrivateProjectsProjectIdImport.update({

 const PrivateProjectsProjectIdUploadRoute =
   PrivateProjectsProjectIdUploadImport.update({
-    path: '/projects/$projectId/upload',
+    path: '/projects/upload',
     getParentRoute: () => PrivateRoute,
   } as any)

 const PrivateProjectsProjectIdImagesImageIdRoute =
   PrivateProjectsProjectIdImagesImageIdImport.update({
-    path: '/projects/$projectId/images/$imageId',
+    path: '/projects/images/$imageId',
     getParentRoute: () => PrivateRoute,
   } as any)

My routes:

β–Ά tree                                                                                                                           master|✚7 
.
β”œβ”€β”€ __root.tsx
β”œβ”€β”€ _private
β”‚   β”œβ”€β”€ index.tsx
β”‚   β”œβ”€β”€ projects
β”‚   β”‚   β”œβ”€β”€ $projectId.tsx
β”‚   β”‚   β”œβ”€β”€ _$projectId
β”‚   β”‚   β”‚   β”œβ”€β”€ images
β”‚   β”‚   β”‚   β”‚   └── $imageId.tsx
β”‚   β”‚   β”‚   └── upload.tsx
β”‚   β”‚   └── index.tsx
β”‚   β”œβ”€β”€ test.tsx
β”‚   └── users
β”‚       └── index.tsx
β”œβ”€β”€ _private.tsx
β”œβ”€β”€ _public
β”‚   β”œβ”€β”€ login.tsx
β”‚   └── logout.tsx
└── _public.tsx

Your Example Website or App

see code above

Steps to Reproduce the Bug or Issue

  1. generate routes

Expected behavior

Expected the nested param to be properly preserved and not skipped

Screenshots or Videos

No response

Platform

Additional context

No response

schiller-manuel commented 2 months ago

did you test with 1.19.6?

mgcrea commented 2 months ago

did you test with 1.19.6?

 ERR_PNPM_NO_MATCHING_VERSION  No matching version found for @tanstack/react-router@^1.19.6

Looks like it's not published?


edit: I do use the 1.19.6 for the vite plugin (if that was the question)

"@tanstack/react-router": "^1.19.4",
"@tanstack/router-vite-plugin": "^1.19.6",
schiller-manuel commented 2 months ago

yes that was the question. can you please provide a minimal complete example e.g. by forking one of the existing examples on Stackblitz?

mgcrea commented 2 months ago

@schiller-manuel https://stackblitz.com/edit/tanstack-router-ddvaja?file=src%2FrouteTree.gen.ts

const LayoutProjectsProjectIdUploadRoute =
  LayoutProjectsProjectIdUploadImport.update({
    path: '/projects/upload',
    getParentRoute: () => LayoutRoute,
  } as any)

Is incorrect

schiller-manuel commented 2 months ago

This does not work: _$projectId

A layout route cannot have a path parameter.

Why isn't the folder named $projectId?

mgcrea commented 2 months ago

This does not work: _$projectId

A layout route cannot have a path parameter.

Why isn't the folder named $projectId?

It used to work fine, if I name it $projectId I get two matches and I only have projects/$projectId that is rendered.

In my case I just want a separate page with the base layout and this specific path: /projects/$projectId/upload (I don't want projects/$projectId to be rendered at all).

Maybe there is another less convoluted way to achieve this?

schiller-manuel commented 2 months ago

what do you mean by "two matches "? what does "base layout" mean?

mgcrea commented 2 months ago

My "base layout" in my case/tree is the _private.tsx that looks like:

    <PrivateLayout params={params} breadcrumbs={query.data}>
      <Outlet />
    </PrivateLayout>

So basically I want:

If I drop the underscore, I get the following matches from the debug UI:

Screenshot 2024-03-11 at 20 26 27

Which leads to only the first one (projects/$projectId) rendering, since it does not have an outlet the second/nested one is skipped.

Before updating, it was working (with the _) as:

Screenshot 2024-03-11 at 20 39 05

Thanks for your help!

schiller-manuel commented 2 months ago

can it be that you are just missing an index route?

move /projects/$projectId.tsx to /projects/$projectId/index.tsx

mgcrea commented 2 months ago

can it be that you are just missing an index route?

move /projects/$projectId.tsx to /projects/$projectId/index.tsx

Looks like it works πŸ‘! Thank you for your time and help!