fix(router-generator): include Outlet in scaffolded route templates

[WuP1ao0]

Description

Fixes #5351

When the route generator scaffolds a new route file, the generated component now includes <Outlet />.
That way if the route later becomes a layout route, child routes will actually render.

This matches what the root route template already does. For a leaf route <Outlet /> just renders nothing, so existing leaf routes are unaffected.

Applied to all three targets (React, Solid, Vue), following each target’s existing root-route style (React/Solid use a fragment, Vue mirrors its root template).

Implementation note

The Outlet import is added as part of the default route template, not the shared tsrImports string.

tsrImports is also used by customScaffolding.routeTemplate and users can’t override it. Putting Outlet in there would force an unused import into every custom-scaffolded file that doesn’t use <Outlet />, triggering no-unused-vars / noUnusedLocals.

Keeping the import next to the default body that actually renders <Outlet /> avoids that problem. Default scaffolding gets the new behaviour, and tsrImports stays as the clean createFileRoute-only import that custom templates expect.

Context

New users following the getting-started guide usually create files in this order: posts.tsx → posts/index.tsx → posts/$postId.tsx.
The auto-generated posts.tsx used to only contain <div>Hello "/posts"!</div> with no <Outlet />, so nested routes looked broken until the user manually added one.

Test plan

• pnpm nx run @tanstack/router-generator:test:unit — 119/119 pass (custom-scaffolding snapshots confirm no stray Outlet import)
• eslint ./src clean
• tsc -p tsconfig.legacy.json — no type errors

AI assistance

I used AI to help explore the generator internals and draft the code + snapshot updates.
I reviewed and validated every change myself (including confirming that tsrImports is shared with custom scaffolding) and can explain the reasoning during review.

Summary by CodeRabbit

• New Features
  • Generated non-lazy React, Solid, and Vue routes now include router outlet rendering.
  • Nested route content can now appear within generated route components.
• Bug Fixes
  • Updated generated route imports and output to consistently support outlet rendering across supported frameworks.

[coderabbitai]

📝 Walkthrough

Walkthrough

Non-lazy React, Solid, and Vue route templates now generate outlet rendering alongside greeting content. The React generator snapshot is updated to match the new outlet-containing route output.

Changes

Layout route outlet generation

Layer / File(s)	Summary
Add outlets to non-lazy route templates packages/router-generator/src/template.ts	React, Solid, and Vue route templates import and render Outlet alongside the generated greeting content.
Update generated route fixtures packages/router-generator/tests/generator/file-modification/snapshots/initiallyEmpty.tsx	The React route snapshot reflects the updated import and outlet-containing component output.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• TanStack/router#7852: Updates route generator templates and snapshots to include React Outlet rendering for non-lazy nested routes.

Suggested labels: package: router-generator

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR implements #5351 by adding Outlet to generated layout-route templates for React, Solid, and Vue.
Out of Scope Changes check	✅ Passed	The changes are tightly scoped to scaffolded route templates and the related snapshot update.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: adding Outlet to scaffolded router templates.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx (1)

2-10: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Include <Outlet /> in the component to match the new template contract.

The Outlet component is imported but unused in these custom scaffolding routes and snapshots. To align the custom scaffolding fixtures with the new default generator behavior (and to prevent unused-import warnings), RouteComponent should render <Outlet />.

• packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx#L2-L10: Update RouteComponent to return a fragment containing the greeting and <Outlet />.
• packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx#L2-L10: Update RouteComponent to return a fragment containing the greeting and <Outlet />.
• packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx#L2-L10: Update the snapshot's RouteComponent to render <Outlet />.
• packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx#L2-L10: Update the snapshot's RouteComponent to render <Outlet />.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx`
around lines 2 - 10, Update RouteComponent in
packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx#L2-L10,
packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx#L2-L10,
packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx#L2-L10,
and
packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx#L2-L10
to return a fragment containing the existing greeting and the imported Outlet
component, matching the new scaffolding template contract.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In
`@packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx`:
- Around line 2-10: Update RouteComponent in
packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx#L2-L10,
packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx#L2-L10,
packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx#L2-L10,
and
packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx#L2-L10
to return a fragment containing the existing greeting and the imported Outlet
component, matching the new scaffolding template contract.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b0c3eac5-77aa-4c70-ae27-b69a3835b329

📥 Commits

Reviewing files that changed from the base of the PR and between edf5575 and 1e026f4.

📒 Files selected for processing (6)

• packages/router-generator/src/template.ts
• packages/router-generator/tests/generator/custom-scaffolding/routes/api/bar.tsx
• packages/router-generator/tests/generator/custom-scaffolding/routes/index.tsx
• packages/router-generator/tests/generator/custom-scaffolding/snapshots/api/bar.tsx
• packages/router-generator/tests/generator/custom-scaffolding/snapshots/index.tsx
• packages/router-generator/tests/generator/file-modification/snapshots/initiallyEmpty.tsx