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

[CanRau]

At least regarding my stuff yes, not sure about OP

[QingjiaTsang]

I came across the same problem as the OP faced. And also, I see your first approach above:

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

Have you found a way to make it work?

I want to use the route group to nest the landing page route files, and in my case, I tried 3 ways:

1. This is the ideal way but failed. It turns out to be not rendered anything when it comes to "/" route just like the OP said:

or 2. I also tried another way to apply the layout and it's still not working with route group:

3. Works if I don't use route group:

I don't know whether this issue has solved for now. I'll be appreciated if you share any solutions.

[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?