Route group and layout at top level prevents root index page from being rendered #1457
Replies: 3 comments 6 replies
-
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)? |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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
tho I get the following error when navigating to any route within 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 |
Beta Was this translation helpful? Give feedback.
-
With the following file structure (file based routing):
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.
Beta Was this translation helpful? Give feedback.
All reactions