Dynamic route segment ID is undefined when used together with non-nested routes

[JacobRKnudsen]

Which project does this relate to?

Router

Describe the bug

When defining non-nested routes that include dynamic route segments, the route parameter (e.g. "$postId") appears as undefined in Tanstack Router Devtools where the dynamic string should be resolved.

This causes incorrect router data to be returned, as a cache hit occurs after the route has been visited once, using the wrong ID because the dynamic segment is undefined.

This is my folder structure:

routes/
├── $postId.tsx
└── $postId_/
    └── edit.tsx

I have also provided a reproducable example.

Your Example Website or App

https://stackblitz.com/edit/github-rpqhbuv7

Steps to Reproduce the Bug or Issue

1. Click on "Post 1"
2. Click on "Edit post"
3. Click on "Home"
4. Click on "Post 2"
5. Click on "Edit post"
6. Data from Post 1 is shown

Expected behavior

I expect the route loader to return the data for Post 2.

Screenshots or Videos

Platform

• Router / Start Version: 1.134.12
• OS: Windows
• Browser: Chrome
• Browser Version: 141.0
• Bundler: Vite
• Bundler Version: 7.1.7

Additional context

No response

[nlynzaad]

Thanks for reporting this.

We did pick up some issues when non-nested routes are used in conjunction with named params as shown in your case.

Unfortunately the fix does have some impact on the way file-based routes is to be used in Links, etc. for example previously you would say <Link to='/$postid_/edit` /> but with this change the underscore is stripped from the path when the route-tree is compiled and hence this now becomes <Link to='/$postid/edit />.

Due to this change we could not apply this as the default and have to postpone this to the next major, but you can opt into the new behaviour through the experimental flag in the Tanstack Router plugin see Non-nested routes

[JacobRKnudsen]

Thanks for the clarification. I’ve tried enabling the nonNestedRoutes experimental setting as suggested, but it doesn’t seem to make a difference in my case. I’ve put together a minimal reproducible example here with the setting enabled: https://stackblitz.com/edit/github-rpqhbuv7-xrvljv8e

Could you take a look and see if I’m missing something?

[nlynzaad]

it is under the experimental section:

    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
      experimental: {
        nonNestedRoutes: true,
      },
    }),

[JacobRKnudsen]

Ah, that makes sense — I hadn’t realized that nonNestedRoutes needed to be placed under the experimental section in the Vite config. Sorry about that!

After updating that, I noticed something else: when having multiple nested "Non-nested" routes within each other, the innermost route does not render its content.

I'm not sure if it's intended that non-nested routes can be nested like this, but here is the structure I'm using:

routes/
├── posts.tsx
└── posts_/
    ├── $postId.tsx
    └── $postId_/
        └── edit.tsx  // This route does not render its content

Example: https://stackblitz.com/edit/github-rpqhbuv7-xrvljv8e

I have since updated my code to use regular nested routes instead, which I believe is the intended approach:

routes/
└── posts/
    ├── index.tsx
    └── $postId/
        ├── index.tsx
        └── edit.tsx

Could you confirm if non-nested routes are expected to support being nested within each other like in the example above?
If not, I’ll go ahead and close the issue, since setting the nonNestedRoutes resolved my issue.

[nlynzaad]

Thanks for testing this and submitting the latest reproducer.

The nesting case does seem to act a bit strangely.

I will investigate a bit further and should we need a PR, will submit one to close the issue.

[nlynzaad]

Nesting is resolved in the latest PR.