Index in grouped layout does not render

[ember mason]

See the provided route tree in the image. In that case, the index.tsx never renders.

Here's my route.tsx:

import { createFileRoute, Outlet } from "@tanstack/react-router";
import { OrganizationNav } from "@/components/layout/organization-nav";

export const Route = createFileRoute("/_authed/$organizationSlug/(orglayout)")({
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <>
      <OrganizationNav />
      <Outlet />
    </>
  );
}

It properly includes the outlet, and the /~/integrations route renders properly. But not the index.tsx, can someone tell me why this happens, is this intended and how should I get around this if it's not a bug?

[terse relic]

can you please provide a complete reproducer?

also cc @analog stag

[ember mason]

@terse relic Absolutely, here it is : https://stackblitz.com/edit/github-3jdwo6hv?file=src%2Froutes%2F_authed%2F%24organizationSlug%2F(orglayout)%2Ftest.tsx

If you go to something like /aaa you should see nothing which is incorrect since you should see what's inside index.tsx (should show « Hello "/_authed/$organizationSlug/(orglayout)/"! », from the index.tsx) and then go to /aaa/test you will then see the test.tsx page which is correct

[ember mason]

Any news?

[terse relic]

no. can you please create a github issue out of this so we can properly track this?

[ember mason]

Absolutely

[analog stag]

Thanks for filling the issue, I submitted a pr that will resolve it.

for a quick workaround you can place the route.tsx file outside the group to resolve it till the PR is merged. This will have no effect on your paths or routing. It's the combination of both index and route inside the group that is causing the issue

[ember mason]

Thank you for the workaround! Unfortunately I need that group because my route.tsx has a nav specific to that group. But I hope the PR will be merged in quickly :)

By the way, I encountered another issue with notFound, I'm guessing the issue could also be resolved with your PR. I linked that issue on github, thanks in advance!

[analog stag]

I might be misunderstanding your requirement a bit.

Remeber a group just helps you structure your files without affecting the route tree (https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#pathless-route-group-directories), hence placing the route.tsx in the group or in the actual route has no real effect. what this means is if you have multiple groups and each has its own route.tsx these will clash as they all refer to the same route. In that type of scenario you would probably be better off looking at pathless layout routes.

In other words the following results in a identical route tree:

_auth
|---$organizationSlug
      |---(orglayout)
          |----route.tsx
          |----index.tsx

_auth
|---$organizationSlug
    |----route.tsx
    |---(orglayout)
        |----index.tsx

however this will result in an error:

_auth
|---$organizationSlug
    |---(orglayout)
        |----index.tsx
        |----route.tsx
    |---(dashboard)
        |----index.tsx
        |----route.tsx

in this case its better to use pathless layouts.

[ember mason]

Mmmh I understand what you are saying. Coming from frameworks like SvelteKit and Next.js I used route groups to use layouts in certain routes. Funnily enough, I never had a problem, given my file structure :

orglayout only has the layout I put in the route.tsx, and projects are not affected and have their own layout

So I guess that absolutely my use case is pathless layout routes, but since using route.tsx inside a grouped route works, I don't really see the difference between the two?

[analog stag]

yeah I see what you are referring to. it is an oddity since grouped routes is not suppose to be causing this. we have non-nested paths specific for this use case. I would suggest looking into that since I cannot guarantee that this behaviour won't change in future.

the trailing underscore means that any path that is under $organizationSlug_ should not be nested in the route under $organizationSlug

[analog stag]

so checked in elsewhere and seems grouped routes have evolved a bit to now mimic pathless layouts in many ways, so what you are seeing is the intended functionality currently. we will probably look at consolidating it a bit in future probably in v2 or another future release.

[ember mason]

Thank you for your insights