fix(router-generator): Pathless Layout Route Renders Empty HTML

[leesb971204]

fixes #3843

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 415b821.

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	❌ Failed	5m 30s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	39s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-05-02 02:30:26 UTC

[pkg-pr-new]

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-rsc
• tanstack-start-example-basic-static
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-example-supabase-basic
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query
• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-solid-start-example-bare
• tanstack-solid-start-example-basic

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@4003

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@4003

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@4003

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@4003

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@4003

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@4003

@tanstack/react-router-with-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-with-query@4003

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@4003

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@4003

@tanstack/react-start-config

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-config@4003

@tanstack/react-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-plugin@4003

@tanstack/react-start-router-manifest

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-router-manifest@4003

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@4003

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@4003

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@4003

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@4003

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@4003

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@4003

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@4003

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@4003

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@4003

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@4003

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@4003

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@4003

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@4003

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@4003

@tanstack/solid-start-config

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-config@4003

@tanstack/solid-start-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-plugin@4003

@tanstack/solid-start-router-manifest

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-router-manifest@4003

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@4003

@tanstack/start

npm i https://pkg.pr.new/TanStack/router/@tanstack/start@4003

@tanstack/start-api-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-api-routes@4003

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@4003

@tanstack/start-config

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-config@4003

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@4003

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-client@4003

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-fetcher@4003

@tanstack/start-server-functions-handler

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-handler@4003

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-server@4003

@tanstack/start-server-functions-ssr

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-functions-ssr@4003

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@4003

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@4003

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@4003

commit: 415b821

[schiller-manuel]

can you add a test for this?

[schiller-manuel]

also wondering if this maybe needs a fix in the router generator instead? what's the idea of your fix here?

[leesb971204]

also wondering if this maybe needs a fix in the router generator instead? what's the idea of your fix here?

Just because only a pathless layout file exists doesn’t mean there’s no route.
Do you think it’s more appropriate to handle this in the generator instead?

[schiller-manuel]

yes I think so. the generator currently generates a "virtual route" in this situation. this is then matched at runtime

[leesb971204]

yes I think so. the generator currently generates a "virtual route" in this situation. this is then matched at runtime

I believe the issue can be resolved by updating the isNonPath value when a node’s only child is a pathless_layout.
What do you think about this approach?

[schiller-manuel]

maybe, I did not look into it deeply yet. can you add an e2e test into one of the existing e2e test setups for react router for this please? then we can check whether the fix solves it

[leesb971204]

maybe, I did not look into it deeply yet. can you add an e2e test into one of the existing e2e test setups for react router for this please? then we can check whether the fix solves it

Got it. But I think additional changes might be needed.
For example, if a node has both a pathless_layout and static children, should we still treat it as isNonPath: true?
In this situation, accessing /app would still result in a empty HTML being returned.
What do you think?

L app  👈 isNonPath ??
  L _appLayout.tsx  
  L test.tsx  

[SeanCassiere]

I think we'll also need to update the test snapshots on this one.

Looking at the current changes on the reproduction sandbox in the reported issue, using the pr-pkg-new packages, the diff shows that a path is being assigned to a pathless layout route.

[SeanCassiere]

Been thinking about this more and we'd need some comprehensive sandbox (end-to-end) testing for this.

Plus, my point earlier about pathless layout routes being assigned a path isn't correct.

[leesb971204]

Been thinking about this more and we'd need some comprehensive sandbox (end-to-end) testing for this.

Plus, my point earlier about pathless layout routes being assigned a path isn't correct.

Then, do you think we should approach this in a different way rather than relying on isNonPath?

[leesb971204]

@SeanCassiere

Could you review the last commit?
I only modified the logic related to the path part, so the e2e tests may not pass, but based on my local testing, it seems to be working fine.
Additional changes might be needed, but I’d appreciate it if you could check whether the issue is resolved.

[SeanCassiere]

@leesb971204 its partially resolved.

With your changes, these scenarios now work.

src/routes/
	app/
		_appLayout.tsx
		_appLayout.dashboard.tsx
		_appLayout.something.tsx

src/routes/
	app/
		_appLayout.tsx
		_appLayout.dashboard.tsx
		_appLayout.something.tsx
		_foo.tsx
		_foo.index.tsx

However, these two scenarios break the route tree.

1. For this scenario, the routeTree file gets put into a state where it tries to create an import from './routes/app' which of-course does not exist on the file-system.

src/routes/
	app/
		_appLayout.tsx
		_appLayout.dashboard.tsx
		_appLayout.something.tsx
		_foo.tsx
		_foo.something.tsx

2. For this scenario, the routeTree file adds an additional /app into the routes. So, instead of it being /app/dashboard, it instead becomes /app/app/dashboard.

src/routes/
	app/
		route.tsx
		_appLayout.tsx
		_appLayout.dashboard.tsx
		_appLayout.something.tsx
		_foo.tsx
		_foo.index.tsx

---

I wish I had better feedback to give, as to how you can approach this, but this is something @schiller-manuel and I have discussed earlier at length with the current system being 'best-effort' compromise that we came to.

The shortcut, to get your original sandbox working, would be to throw a redirect in src/routes/app/index.tsx to a different route or to set a notFoundComponent and immediately throw a notFound.

src/routes/
	app/
+		index.tsx
		_appLayout.tsx
		_appLayout.dashboard.tsx
		_appLayout.something.tsx