From 1e026f4900a73b8f43f5e08ee646cbb62561c441 Mon Sep 17 00:00:00 2001
From: WuP1ao0 <WuP1ao0@users.noreply.github.com>
Date: Wed, 22 Jul 2026 01:30:35 +0800
Subject: [PATCH 1/2] fix(router-generator): include Outlet in scaffolded route
 templates

When the route generator scaffolds a new route file, the generated
component now includes <Outlet /> so child routes render correctly
if the route later becomes a layout route. This matches the existing
root route template behavior and prevents new users from getting
stuck when following the getting-started guide with nested routes.

Fixes #5351
---
 packages/router-generator/src/template.ts            | 12 ++++++------
 .../generator/custom-scaffolding/routes/api/bar.tsx  |  2 +-
 .../generator/custom-scaffolding/routes/index.tsx    |  2 +-
 .../custom-scaffolding/snapshots/api/bar.tsx         |  2 +-
 .../generator/custom-scaffolding/snapshots/index.tsx |  2 +-
 .../file-modification/snapshots/initiallyEmpty.tsx   |  9 +++++++--
 6 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/router-generator/src/template.ts b/packages/router-generator/src/template.ts
index 11ca968933..0103983e06 100644
--- a/packages/router-generator/src/template.ts
+++ b/packages/router-generator/src/template.ts
@@ -77,11 +77,11 @@ export function getTargetTemplate(config: Config): TargetTemplate {
               '%%tsrImports%%',
               '\n\n',
               '%%tsrExportStart%%{\n component: RouteComponent\n }%%tsrExportEnd%%\n\n',
-              'function RouteComponent() { return <div>Hello "%%tsrPath%%"!</div> };\n',
+              'function RouteComponent() { return (<><div>Hello "%%tsrPath%%"!</div><Outlet /></>) };\n',
             ].join(''),
           imports: {
             tsrImports: () =>
-              "import { createFileRoute } from '@tanstack/react-router';",
+              "import { Outlet, createFileRoute } from '@tanstack/react-router';",
             tsrExportStart: (routePath) =>
               `export const Route = createFileRoute(${serializeRoutePath(routePath)})(`,
             tsrExportEnd: () => ');',
@@ -130,11 +130,11 @@ export function getTargetTemplate(config: Config): TargetTemplate {
               '%%tsrImports%%',
               '\n\n',
               '%%tsrExportStart%%{\n component: RouteComponent\n }%%tsrExportEnd%%\n\n',
-              'function RouteComponent() { return <div>Hello "%%tsrPath%%"!</div> };\n',
+              'function RouteComponent() { return (<><div>Hello "%%tsrPath%%"!</div><Outlet /></>) };\n',
             ].join(''),
           imports: {
             tsrImports: () =>
-              "import { createFileRoute } from '@tanstack/solid-router';",
+              "import { Outlet, createFileRoute } from '@tanstack/solid-router';",
             tsrExportStart: (routePath) =>
               `export const Route = createFileRoute(${serializeRoutePath(routePath)})(`,
             tsrExportEnd: () => ');',
@@ -186,11 +186,11 @@ export function getTargetTemplate(config: Config): TargetTemplate {
               '%%tsrImports%%',
               '\n\n',
               '%%tsrExportStart%%{\n component: RouteComponent\n }%%tsrExportEnd%%\n\n',
-              'function RouteComponent() { return h("div", {}, "Hello \\"%%tsrPath%%\\"!") };\n',
+              'function RouteComponent() { return h("div", {}, ["Hello \\"%%tsrPath%%\\"!", h(Outlet)]) };\n',
             ].join(''),
           imports: {
             tsrImports: () =>
-              "import { createFileRoute } from '@tanstack/vue-router';",
+              "import { Outlet, createFileRoute } from '@tanstack/vue-router';",
             tsrExportStart: (routePath) =>
               `export const Route = createFileRoute(${serializeRoutePath(routePath)})(`,
             tsrExportEnd: () => ');',
diff --git a/packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx b/packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx
index 5629cffd8c..93a3f8414b 100644
--- a/packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx
+++ b/packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { createFileRoute } from '@tanstack/react-router'
+import { Outlet, createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/api/bar')({
   component: RouteComponent,
diff --git a/packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx b/packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx
index 8b22ea6bb5..7d5913c541 100644
--- a/packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx
+++ b/packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { createFileRoute } from '@tanstack/react-router'
+import { Outlet, createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/')({
   component: RouteComponent,
diff --git a/packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx b/packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx
index 5629cffd8c..93a3f8414b 100644
--- a/packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx
+++ b/packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { createFileRoute } from '@tanstack/react-router'
+import { Outlet, createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/api/bar')({
   component: RouteComponent,
diff --git a/packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx b/packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx
index 8b22ea6bb5..7d5913c541 100644
--- a/packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx
+++ b/packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { createFileRoute } from '@tanstack/react-router'
+import { Outlet, createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/')({
   component: RouteComponent,
diff --git a/packages/router-generator/tests/generator/file-modification/snapshots/initiallyEmpty.tsx b/packages/router-generator/tests/generator/file-modification/snapshots/initiallyEmpty.tsx
index a7fea80dde..bcdb9887d1 100644
--- a/packages/router-generator/tests/generator/file-modification/snapshots/initiallyEmpty.tsx
+++ b/packages/router-generator/tests/generator/file-modification/snapshots/initiallyEmpty.tsx
@@ -1,9 +1,14 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { Outlet, createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/(test)/initiallyEmpty')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
-  return <div>Hello "/(test)/initiallyEmpty"!</div>
+  return (
+    <>
+      <div>Hello "/(test)/initiallyEmpty"!</div>
+      <Outlet />
+    </>
+  )
 }

From 569ef5958ddc36e6a976efd3259ba25be05e570b Mon Sep 17 00:00:00 2001
From: WuP1ao0 <WuP1ao0@users.noreply.github.com>
Date: Wed, 22 Jul 2026 17:13:41 +0800
Subject: [PATCH 2/2] fix(router-generator): keep Outlet import with default
 route body to avoid unused import in custom scaffolding (#5351)

---
 packages/router-generator/src/template.ts            | 12 ++++++------
 .../generator/custom-scaffolding/routes/api/bar.tsx  |  2 +-
 .../generator/custom-scaffolding/routes/index.tsx    |  2 +-
 .../custom-scaffolding/snapshots/api/bar.tsx         |  2 +-
 .../generator/custom-scaffolding/snapshots/index.tsx |  2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/router-generator/src/template.ts b/packages/router-generator/src/template.ts
index 0103983e06..a175ffd81b 100644
--- a/packages/router-generator/src/template.ts
+++ b/packages/router-generator/src/template.ts
@@ -74,14 +74,14 @@ export function getTargetTemplate(config: Config): TargetTemplate {
         route: {
           template: () =>
             [
-              '%%tsrImports%%',
+              "import { Outlet, createFileRoute } from '@tanstack/react-router';",
               '\n\n',
               '%%tsrExportStart%%{\n component: RouteComponent\n }%%tsrExportEnd%%\n\n',
               'function RouteComponent() { return (<><div>Hello "%%tsrPath%%"!</div><Outlet /></>) };\n',
             ].join(''),
           imports: {
             tsrImports: () =>
-              "import { Outlet, createFileRoute } from '@tanstack/react-router';",
+              "import { createFileRoute } from '@tanstack/react-router';",
             tsrExportStart: (routePath) =>
               `export const Route = createFileRoute(${serializeRoutePath(routePath)})(`,
             tsrExportEnd: () => ');',
@@ -127,14 +127,14 @@ export function getTargetTemplate(config: Config): TargetTemplate {
         route: {
           template: () =>
             [
-              '%%tsrImports%%',
+              "import { Outlet, createFileRoute } from '@tanstack/solid-router';",
               '\n\n',
               '%%tsrExportStart%%{\n component: RouteComponent\n }%%tsrExportEnd%%\n\n',
               'function RouteComponent() { return (<><div>Hello "%%tsrPath%%"!</div><Outlet /></>) };\n',
             ].join(''),
           imports: {
             tsrImports: () =>
-              "import { Outlet, createFileRoute } from '@tanstack/solid-router';",
+              "import { createFileRoute } from '@tanstack/solid-router';",
             tsrExportStart: (routePath) =>
               `export const Route = createFileRoute(${serializeRoutePath(routePath)})(`,
             tsrExportEnd: () => ');',
@@ -183,14 +183,14 @@ export function getTargetTemplate(config: Config): TargetTemplate {
           template: () =>
             [
               'import { h } from "vue"\n',
-              '%%tsrImports%%',
+              "import { Outlet, createFileRoute } from '@tanstack/vue-router';",
               '\n\n',
               '%%tsrExportStart%%{\n component: RouteComponent\n }%%tsrExportEnd%%\n\n',
               'function RouteComponent() { return h("div", {}, ["Hello \\"%%tsrPath%%\\"!", h(Outlet)]) };\n',
             ].join(''),
           imports: {
             tsrImports: () =>
-              "import { Outlet, createFileRoute } from '@tanstack/vue-router';",
+              "import { createFileRoute } from '@tanstack/vue-router';",
             tsrExportStart: (routePath) =>
               `export const Route = createFileRoute(${serializeRoutePath(routePath)})(`,
             tsrExportEnd: () => ');',
diff --git a/packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx b/packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx
index 93a3f8414b..5629cffd8c 100644
--- a/packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx
+++ b/packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Outlet, createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/api/bar')({
   component: RouteComponent,
diff --git a/packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx b/packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx
index 7d5913c541..8b22ea6bb5 100644
--- a/packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx
+++ b/packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Outlet, createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/')({
   component: RouteComponent,
diff --git a/packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx b/packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx
index 93a3f8414b..5629cffd8c 100644
--- a/packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx
+++ b/packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Outlet, createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/api/bar')({
   component: RouteComponent,
diff --git a/packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx b/packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx
index 7d5913c541..8b22ea6bb5 100644
--- a/packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx
+++ b/packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Outlet, createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/')({
   component: RouteComponent,