TanStack: Support pathless layout routes by krish-mittal1 · Pull Request #35197 · storybookjs/storybook

krish-mittal1 · 2026-06-17T10:12:38Z

What I did

Pathless layout routes (file routes whose own segment starts with _, like _auth.tsx) weren't working in the TanStack framework. The mocked createFileRoute set path/fullPath on every file route. For normal routes the generated route tree overwrites path with the correct relative value, but pathless layouts are emitted without a path, so the placeholder / stuck around and turned the layout into an index route at /. The layout and everything nested under it then dropped out of matching, so those stories rendered only the root.

Now pathless layouts are built as id-only routes (the same shape the generator emits), and their id is kept when the tree is duplicated since there's no path to derive identity from. Normal routes are untouched.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Added a createFileRoute unit test checking that a pathless layout route (/_auth) stays id-only with path/fullPath undefined. The existing cases (groups, _layout/page) are unchanged.

Manual testing

Run a sandbox: yarn task sandbox --template react-vite/default-ts --start-from auto (or cd code && yarn storybook:ui).

Add a pathless layout route with an outlet and a child under it:

const Layout = createFileRoute('/_auth')({
  component: () => (<div><h1>auth layout</h1><Outlet /></div>),
});
const Dashboard = createFileRoute('/_auth/dashboard')({
  component: () => <p>dashboard</p>,
});

Write a story that passes the route tree (root → _auth → dashboard) through parameters.tanstack.router.route.
Open the story. Both "auth layout" and "dashboard" should render. On next only the root shows up and the layout + child are missing.

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update MIGRATION.MD

No docs changes — this just restores expected behavior for an existing feature.

Summary by CodeRabbit

Improvements
- Enhanced support for pathless layout routes in route tree operations, improving handling during route creation and duplication for underscore-prefixed layout routes.
Tests
- Added test coverage for pathless layout route creation to verify routes correctly maintain their identifiers and preserve undefined path properties as expected.

pathless layouts like _auth.tsx were getting a "/" path from the createFileRoute mock, so the layout and its children dropped out of route matching. keep them id-only like the real generator does, and preserve the id when cloning the tree. closes storybookjs#35193

github-actions · 2026-06-17T10:13:07Z

	Fails
🚫	PR is not labeled with one of: ["qa:needed","qa:skip","qa:success"]

Generated by 🚫 dangerJS against a4e6cea

coderabbitai · 2026-06-17T10:17:25Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 36bb066b-4a6e-402d-ae94-5e10df4f8a12

📥 Commits

Reviewing files that changed from the base of the PR and between ff9d956 and a59047a.

📒 Files selected for processing (4)

code/frameworks/tanstack-react/src/export-mocks/react-router.test.ts
code/frameworks/tanstack-react/src/export-mocks/react-router.ts
code/frameworks/tanstack-react/src/routing/duplicate-tree.ts
code/frameworks/tanstack-react/src/routing/path-utils.ts

📝 Walkthrough

Walkthrough

Adds an isPathlessLayoutRoute utility that detects underscore-prefixed route path segments. createFileRoute gains a conditional branch that, for pathless routes, creates a route without path/fullPath and sets only id. cloneChild in the duplicate-tree logic is updated to conditionally re-inject id for pathless cloned routes. A test is added to cover the new behavior.

Changes

Pathless layout route handling

Layer / File(s)	Summary
`isPathlessLayoutRoute` utility and `createFileRoute`/`cloneChild` wiring `code/frameworks/tanstack-react/src/routing/path-utils.ts`, `code/frameworks/tanstack-react/src/export-mocks/react-router.ts`, `code/frameworks/tanstack-react/src/routing/duplicate-tree.ts`	Adds `isPathlessLayoutRoute` (checks if the last non-empty path segment starts with `_`), imports and calls it in `createFileRoute` to return a route factory that sets only `id` without `path`/`fullPath`, and updates `cloneChild` to store `oldId` and conditionally re-inject `id` into `createRoute` only when `rest.path === undefined`.
Pathless route test `code/frameworks/tanstack-react/src/export-mocks/react-router.test.ts`	Adds a test asserting `createFileRoute('/_auth')` yields `options.id === '/_auth'` with `options.path` and `options.fullPath` both `undefined`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

storybookjs/storybook#34948: Directly overlaps — both PRs modify createFileRoute in react-router.ts and use path-utils.ts to alter how underscore-prefixed/layout-style path segments are handled in route mocking.
storybookjs/storybook#34950: Both PRs adjust TanStack route-mock creation logic around the id vs path relationship in createFileRoute.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

krish-mittal1 · 2026-06-22T19:44:59Z

Hi @Sidnioulz, this PR addresses #35193 with focused unit coverage. It’s ready for review whenever you have time. Thanks!

storybook-app-bot · 2026-07-31T08:40:29Z

Package Benchmarks

^{Commit: a4e6cea, ran on 31 July 2026 at 08:40:20 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	18	18	0
Self size	1.29 MB	1.31 MB	🚨 +20 KB 🚨
Dependency size	9.28 MB	9.28 MB	🎉 -74 B 🎉
Bundle Size Analyzer	Link	Link

`@storybook/builder-webpack5`

	Before	After	Difference
Dependency count	186	186	0
Self size	79 KB	79 KB	🎉 -290 B 🎉
Dependency size	35.73 MB	36.13 MB	🚨 +391 KB 🚨
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	73	73	0
Self size	21.39 MB	22.16 MB	🚨 +772 KB 🚨
Dependency size	36.75 MB	31.22 MB	🎉 -5.53 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/angular`

	Before	After	Difference
Dependency count	185	185	0
Self size	160 KB	160 KB	🚨 +289 B 🚨
Dependency size	30.13 MB	30.52 MB	🚨 +391 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/angular-vite`

	Before	After	Difference
Dependency count	36	36	0
Self size	33.41 MB	33.40 MB	🎉 -3 KB 🎉
Dependency size	21.34 MB	15.80 MB	🎉 -5.54 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/ember`

	Before	After	Difference
Dependency count	185	185	0
Self size	13 KB	15 KB	🚨 +2 KB 🚨
Dependency size	31.08 MB	31.47 MB	🚨 +391 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	531	531	0
Self size	641 KB	663 KB	🚨 +21 KB 🚨
Dependency size	62.41 MB	62.84 MB	🚨 +438 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/nextjs-vite`

	Before	After	Difference
Dependency count	94	93	🎉 -1 🎉
Self size	1.42 MB	1.39 MB	🎉 -26 KB 🎉
Dependency size	23.91 MB	23.88 MB	🎉 -24 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/react-native-web-vite`

	Before	After	Difference
Dependency count	125	122	🎉 -3 🎉
Self size	29 KB	30 KB	🚨 +922 B 🚨
Dependency size	25.90 MB	24.95 MB	🎉 -944 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/react-vite`

	Before	After	Difference
Dependency count	83	83	0
Self size	32 KB	36 KB	🚨 +4 KB 🚨
Dependency size	21.22 MB	21.65 MB	🚨 +433 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	272	272	0
Self size	23 KB	23 KB	🚨 +777 B 🚨
Dependency size	48.19 MB	48.62 MB	🚨 +438 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	198	198	0
Self size	15 KB	16 KB	🚨 +761 B 🚨
Dependency size	37.00 MB	37.39 MB	🚨 +391 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/svelte-vite`

	Before	After	Difference
Dependency count	20	20	0
Self size	54 KB	56 KB	🚨 +2 KB 🚨
Dependency size	26.65 MB	27.04 MB	🚨 +385 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/sveltekit`

	Before	After	Difference
Dependency count	21	21	0
Self size	56 KB	56 KB	🚨 +58 B 🚨
Dependency size	26.71 MB	27.09 MB	🚨 +387 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/tanstack-react`

	Before	After	Difference
Dependency count	84	84	0
Self size	113 KB	110 KB	🎉 -3 KB 🎉
Dependency size	21.25 MB	21.69 MB	🚨 +436 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3-vite`

	Before	After	Difference
Dependency count	103	102	🎉 -1 🎉
Self size	34 KB	36 KB	🚨 +2 KB 🚨
Dependency size	43.11 MB	43.04 MB	🎉 -74 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	205	205	0
Self size	827 KB	827 KB	🎉 -32 B 🎉
Dependency size	91.60 MB	86.84 MB	🎉 -4.76 MB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	198	198	0
Self size	32 KB	32 KB	🎉 -7 B 🎉
Dependency size	90.08 MB	85.32 MB	🎉 -4.76 MB 🎉
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	74	74	0
Self size	1.09 MB	1.09 MB	🎉 -831 B 🎉
Dependency size	58.14 MB	53.38 MB	🎉 -4.76 MB 🎉
Bundle Size Analyzer	node	node

`@storybook/preset-react-webpack`

	Before	After	Difference
Dependency count	161	161	0
Self size	19 KB	19 KB	🎉 -137 B 🎉
Dependency size	32.70 MB	33.09 MB	🚨 +391 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react`

	Before	After	Difference
Dependency count	59	59	0
Self size	1.48 MB	1.52 MB	🚨 +47 KB 🚨
Dependency size	12.30 MB	12.30 MB	🚨 +46 B 🚨
Bundle Size Analyzer	Link	Link

huang-julien · 2026-08-04T07:26:36Z

#35193 seems like the issue was already solved

github-actions Bot added the agent-scan:human label Jun 17, 2026

krish-mittal1 changed the title ~~fix(tanstack-react): support pathless layout routes~~ TanStack: Support pathless layout routes Jun 17, 2026

github-actions Bot added the Stale label Jul 3, 2026

Sidnioulz added the tanstack label Jul 13, 2026

Merge branch 'next' into fix/tanstack-pathless-layout-routes

a4e6cea

huang-julien added bug ci:normal Run our default set of CI jobs (choose this for most PRs). labels Jul 13, 2026

unpunnyfuns mentioned this pull request Jul 15, 2026

TanStack: Support pathless layout routes (id-only) in story routing #35465

Merged

github-actions Bot added needs triage and removed Stale labels Jul 18, 2026

valentinpalkovic added this to Core Team Projects Jul 24, 2026

github-actions Bot added the Stale label Jul 28, 2026

valentinpalkovic added the sev:S2 High priority. Fix within weeks. label Jul 31, 2026

github-actions Bot removed the Stale label Aug 1, 2026

huang-julien approved these changes Aug 4, 2026

View reviewed changes

huang-julien closed this Aug 4, 2026

github-project-automation Bot moved this to Done in Core Team Projects Aug 4, 2026

Navigation Menu

Repository navigation

TanStack: Support pathless layout routes - #35197

TanStack: Support pathless layout routes#35197
krish-mittal1 wants to merge 2 commits into
storybookjs:nextfrom
krish-mittal1:fix/tanstack-pathless-layout-routes

krish-mittal1 commented Jun 17, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

github-actions Bot commented Jun 17, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 17, 2026

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

krish-mittal1 commented Jun 22, 2026

Uh oh!

storybook-app-bot Bot commented Jul 31, 2026

Uh oh!

huang-julien commented Aug 4, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

krish-mittal1 commented Jun 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 17, 2026

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

krish-mittal1 commented Jun 22, 2026

Uh oh!

storybook-app-bot Bot commented Jul 31, 2026

Package Benchmarks

@storybook/addon-docs

@storybook/builder-webpack5

storybook

@storybook/angular

@storybook/angular-vite

@storybook/ember

@storybook/nextjs

@storybook/nextjs-vite

@storybook/react-native-web-vite

@storybook/react-vite

@storybook/react-webpack5

@storybook/server-webpack5

@storybook/svelte-vite

@storybook/sveltekit

@storybook/tanstack-react

@storybook/vue3-vite

@storybook/cli

@storybook/codemod

create-storybook

@storybook/preset-react-webpack

@storybook/react

Uh oh!

huang-julien commented Aug 4, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

krish-mittal1 commented Jun 17, 2026 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Jun 17, 2026 •

edited

Loading

`@storybook/addon-docs`

`@storybook/builder-webpack5`

`storybook`

`@storybook/angular`

`@storybook/angular-vite`

`@storybook/ember`

`@storybook/nextjs`

`@storybook/nextjs-vite`

`@storybook/react-native-web-vite`

`@storybook/react-vite`

`@storybook/react-webpack5`

`@storybook/server-webpack5`

`@storybook/svelte-vite`

`@storybook/sveltekit`

`@storybook/tanstack-react`

`@storybook/vue3-vite`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`

`@storybook/preset-react-webpack`

`@storybook/react`