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

e2e/react-router/basic-file-based/src/routes/(virtualLayout)/bar.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(virtualLayout)/bar')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/(virtualLayout)/bar"!</div>
+}

e2e/react-router/basic-file-based/src/routes/(virtualLayout)/bar/_barLayout.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(virtualLayout)/bar/_barLayout')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/(virtualLayout)/bar/_barLayout"!</div>
+}

e2e/react-router/basic-file-based/src/routes/(virtualLayout)/baz/_bazLayout.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(virtualLayout)/baz/_bazLayout')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/(virtualLayout)/baz/_bazLayout"!</div>
+}

e2e/react-router/basic-file-based/src/routes/(virtualLayout)/baz/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(virtualLayout)/baz/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/(virtualLayout)/baz/"!</div>
+}

e2e/react-router/basic-file-based/src/routes/(virtualLayout)/foo/_fooLayout.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(virtualLayout)/foo/_fooLayout')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/(virtualLayout)/foo/_fooLayout"!</div>
+}

e2e/react-router/basic-file-based/src/routes/(virtualLayout)/quux/_quuxLayout.hello.tsx

@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(virtualLayout)/quux/_quuxLayout/hello')(
+  {
+    component: RouteComponent,
+  },
+)
+
+function RouteComponent() {
+  return <div>Hello "/(virtualLayout)/quux/_quuxLayout/hello"!</div>
+}

e2e/react-router/basic-file-based/src/routes/(virtualLayout)/quux/_quuxLayout.tsx

@@ -0,0 +1,13 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(virtualLayout)/quux/_quuxLayout')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div>
+      <Outlet />
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/(virtualLayout)/qux/_quxLayout.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(virtualLayout)/qux/_quxLayout')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/(virtualLayout)/qux/_quxLayout"!</div>
+}

e2e/react-router/basic-file-based/src/routes/(virtualLayout)/qux/route.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/(virtualLayout)/qux')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div>Hello "/(virtualLayout)/qux"!</div>
+}

e2e/react-router/basic-file-based/tests/app.spec.ts

@@ -308,3 +308,37 @@ test('Should remount deps when remountDeps does change ', async ({ page }) => {
     'Page component mounts: 2',
   )
 })
+
+test('Should match notFoundComponent when navigating to a route with a virtualLayout', async ({
+  page,
+}) => {
+  await page.goto('/foo')
+  await expect(page.getByRole('paragraph')).toContainText(
+    'This is the notFoundComponent configured on root route',
+  )
+
+  await page.goto('/bar')
+  await expect(page.locator('#app')).toContainText(
+    'Hello "/(virtualLayout)/bar"!',
+  )
+
+  await page.goto('/baz/')
+  await expect(page.locator('#app')).toContainText(
+    'Hello "/(virtualLayout)/baz/"!',
+  )
+
+  await page.goto('/qux')
+  await expect(page.locator('#app')).toContainText(
+    'Hello "/(virtualLayout)/qux"!',
+  )
+
+  await page.goto('/quux')
+  await expect(page.getByRole('paragraph')).toContainText(
+    'This is the notFoundComponent configured on root route',
+  )
+
+  await page.goto('/quux/hello')
+  await expect(page.locator('#app')).toContainText(
+    'Hello "/(virtualLayout)/quux/_quuxLayout/hello"!',
+  )
+})

packages/router-core/src/router.ts

@@ -3197,6 +3197,7 @@ interface RouteLike {
   children?: Array<RouteLike>
   options?: {
     caseSensitive?: boolean
+    isVirtualLayout?: boolean
   }
 }
 
@@ -3457,6 +3458,8 @@ export function getMatchedRoutes<TRouteLike extends RouteLike>({
       | { foundRoute: TRouteLike; routeParams: Record<string, string> }
       | undefined = undefined
     for (const route of flatRoutes) {
+      if (route.options?.isVirtualLayout) continue
+
       const matchedParams = getMatchedParams(route)
 
       if (matchedParams) {

packages/router-generator/src/generator.ts

@@ -534,6 +534,23 @@ export class Generator {
         (d) => d,
       ])
 
+      // After all nodes have been processed we can safely (re)-evaluate
+      // whether a virtual `layout` route should be treated as a virtual-layout wrapper
+      sortedRouteNodes.forEach((node) => {
+        if (
+          node.isVirtual &&
+          node._fsRouteType === 'layout' &&
+          node.children &&
+          !node.children.some((c) => c.cleanedPath === '/')
+        ) {
+          node.isVirtualLayout = true
+        } else {
+          // If the conditions are not met, ensure the flag is falsy so we
+          // don't rely on an outdated value that may have been set earlier.
+          delete node.isVirtualLayout
+        }
+      })
+
       const pluginConfig = plugin.config({
         generator: this,
         rootRouteNode,
@@ -592,6 +609,7 @@ export class Generator {
               `id: '${node.path}'`,
               !node.isNonPath ? `path: '${node.cleanedPath}'` : undefined,
               `getParentRoute: () => ${findParent(node, exportName)}`,
+              node.isVirtualLayout ? `isVirtualLayout: true` : undefined,
             ]
               .filter(Boolean)
               .join(',')}

packages/router-generator/src/types.ts

@@ -13,6 +13,7 @@ export type RouteNode = {
   children?: Array<RouteNode>
   parent?: RouteNode
   exports?: Array<string>
+  isVirtualLayout?: boolean
 }
 
 export interface GetRouteNodesResult {

packages/router-generator/tests/generator/nested-layouts/routeTree.snapshot.ts

@@ -42,11 +42,13 @@ const NestedRoute = NestedRouteImport.update({
   id: '/nested',
   path: '/nested',
   getParentRoute: () => rootRouteImport,
+  isVirtualLayout: true,
 } as any)
 const FooRoute = FooRouteImport.update({
   id: '/foo',
   path: '/foo',
   getParentRoute: () => rootRouteImport,
+  isVirtualLayout: true,
 } as any)
 const LayoutA2Route = LayoutA2RouteImport.update({
   id: '/_layout-a2',

packages/router-generator/tests/generator/no-duplicate-route-segment/routeTree.snapshot.ts

@@ -20,6 +20,7 @@ const FooRoute = FooRouteImport.update({
   id: '/foo',
   path: '/foo',
   getParentRoute: () => rootRouteImport,
+  isVirtualLayout: true,
 } as any)
 const FooLayoutRouteRoute = FooLayoutRouteRouteImport.update({
   id: '/_layout',