Route group and layout at top level prevents root index page from being rendered

[octopicorn]

With the following file structure (file based routing):

src/routes/
  (landing-pages)/  <- this is a route group which will not appear in the url path
      _layout/
          index.tsx // <- this is the home page with layout applied
          about.tsx
          contact.tsx
      _layout.tsx // <- this is the layout file

Expected result:
Home page is rendered with the layout applied.

Actual result:
No home page is rendered at all.

If I remove the (landing-pages) route group, rendering works again as expected. There seems to be something about the route group at top level that prevents the route '/' from rendering _layout/index.tsx wrapped by _layout.tsx.

I've reproduced this in a CodePen based off of the Basic example in the docs.

Is layout supposed to work in combination with route groups? Or is it an either/or set of features?

This is a real use case. I want Home and several other pages to share a "top level" layout, let's say a left nav and header. Then I want a set of subpages to share a completely different layout (not inheriting from top level layout at all), like a project workspace with tabs.

I thought route groups might offer me a way to separate these two groups of layout groups, but it seems like there is something about the root index page that doesn't fit this pattern.

[schiller-manuel]

looks like a bug in the generator. can you please create an issue with a minimal complete example (fork one of the existing examples on Stackblitz)?

[CanRau]

Also trying to have root index nested in a layout to completely separate it from auth & other layouts

Tried couple of ways

tree app/routes
app/routes
├── (auth)
│   └── login.tsx
├── (main)
│   ├── _layout
│   │   └── index.tsx
│   └── _layout.tsx
└── __root.tsx

tree app/routes
app/routes
├── (auth)
│   └── login.tsx
├── (main)
│   └── index.tsx
├── _(main).tsx
└── __root.tsx

tree app/routes
app/routes
├── (auth)
│   └── login.tsx
├── _main
│   └── index.tsx
├── _main.tsx
└── __root.tsx

Actually while writing this I got the 1. approach kinda working in Stackblitz tho navigating causes different errors https://stackblitz.com/edit/github-3ber8h locally I can't get it working at all

Also played around with the routeToken approach using the default and changing it to layout as suggested here #1102 (comment) tho still failing

[CanRau]

Tried this one as it looks promising https://github.com/SeanCassiere/nv-rental-clone/blob/master/src/routes/_auth/(dashboard)/_index.tsx

with the following tsr settings

indexToken: "_index",
routeToken: "_route",

tho I get the following error when navigating to any route within _main where _index.tsx lives in my case. routeTree.gen looks good to me

Error in renderToPipeableStream: TypeError: String.prototype.search called on null or undefined
    at search (<anonymous>)
    at functionalUpdate (file:///[..]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/dist/esm/utils.js:10:12)
    at final (file:///[..]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/dist/esm/router.js:429:20)
    at applyNext (file:///[..]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/dist/esm/router.js:440:20)
    at applyMiddlewares (file:///[..]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/dist/esm/router.js:442:18)
    at build (file:///[..]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/dist/esm/router.js:444:18)
    at buildWithMatches (file:///[..]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/dist/esm/router.js:463:22)
    at Router.buildLocation (file:///[..]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/dist/esm/router.js:504:14)

this is just an exerpt the full trace is quite long

[schiller-manuel]

@QingjiaTsang can you provide a minimal complete example?

[QingjiaTsang]

@schiller-manuel https://github.com/QingjiaTsang/tanstack-router-route-groups-issue

Eventually, I found out that it has something to do with the other pathless route inside another route group like the ~_authenticated-layout.tsx file in the pic. In this case, if you delete the ~_authenticated-layout.tsx file, things will go well.

[QingjiaTsang]

@schiller-manuel Did I make it clear?

[1hachem]

I am facing the same issue now, did you find any fix for this @QingjiaTsang

[1hachem]

for now my solution is to move the / and its layout to the root of my routes directory (moved it out of the (landing)/ group)