fascinating-indigo

Index in grouped layout does not render

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 />
    </>
  );
}

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?

13 Replies

ratty-blush•2mo ago

can you please provide a complete reproducer? also cc @Nico Lynzaad

fascinating-indigoOP•2mo ago

@Manuel Schiller 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

StackBlitz

Index bug - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

fascinating-indigoOP•2mo ago

Any news?

ratty-blush•2mo ago

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

fascinating-indigoOP•2mo ago

Absolutely

eastern-cyan•2mo ago

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

fascinating-indigoOP•2mo ago

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!

eastern-cyan•2mo ago

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
      |---(orglayout)
          |----route.tsx
          |----index.tsx

 
_auth
|---$organizationSlug
    |----route.tsx
    |---(orglayout)
        |----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

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

in this case its better to use pathless layouts.

fascinating-indigoOP•2mo ago

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 :

fascinating-indigoOP•2mo ago

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?

eastern-cyan•2mo ago

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.

eastern-cyan•2mo ago

the trailing underscore means that any path that is under $organizationSlug_ should not be nested in the route under $organizationSlug 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.

fascinating-indigoOP•2mo ago

Thank you for your insights

Gaming

Programming

Index in grouped layout does not render

Did you find this page helpful?