From 772be7a799b49309b969a59de3a7ecf4eed5e99c Mon Sep 17 00:00:00 2001
From: coyaSONG <66289470+coyaSONG@users.noreply.github.com>
Date: Thu, 16 Jul 2026 08:59:01 +0900
Subject: [PATCH] docs(start): explain parent route outlets

---
 docs/start/framework/react/guide/routing.md | 22 +++++++++++++++++++++
 docs/start/framework/solid/guide/routing.md | 22 +++++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/docs/start/framework/react/guide/routing.md b/docs/start/framework/react/guide/routing.md
index 30d97a8241..9fba7fab35 100644
--- a/docs/start/framework/react/guide/routing.md
+++ b/docs/start/framework/react/guide/routing.md
@@ -202,6 +202,28 @@ To create a route, create a new file that corresponds to the path of the route y
 | `/posts/:postId` | `posts/$postId.tsx` | Dynamic Route  |
 | `/rest/*`        | `rest/$.tsx`        | Wildcard Route |
 
+When the route generator creates a file such as `posts.tsx`, it adds a starter
+component. Because `posts.tsx` is the parent of `posts/index.tsx` and
+`posts/$postId.tsx`, its component must render an `<Outlet />` for those child
+routes to appear:
+
+```tsx title="src/routes/posts.tsx"
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts')({
+  component: PostsLayout,
+})
+
+function PostsLayout() {
+  return <Outlet />
+}
+```
+
+Place `<Outlet />` wherever the child route should render within any shared
+layout UI. If the parent route does not need a component, remove the generated
+`component` option instead; a route without a component renders an outlet
+automatically.
+
 ## Defining Routes
 
 To define a route, use the `createFileRoute` function to export the route as the `Route` variable.
diff --git a/docs/start/framework/solid/guide/routing.md b/docs/start/framework/solid/guide/routing.md
index b33b6180ad..1d90e63b19 100644
--- a/docs/start/framework/solid/guide/routing.md
+++ b/docs/start/framework/solid/guide/routing.md
@@ -198,6 +198,28 @@ To create a route, create a new file that corresponds to the path of the route y
 | `/posts/:postId` | `posts/$postId.tsx` | Dynamic Route  |
 | `/rest/*`        | `rest/$.tsx`        | Wildcard Route |
 
+When the route generator creates a file such as `posts.tsx`, it adds a starter
+component. Because `posts.tsx` is the parent of `posts/index.tsx` and
+`posts/$postId.tsx`, its component must render an `<Outlet />` for those child
+routes to appear:
+
+```tsx title="src/routes/posts.tsx"
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts')({
+  component: PostsLayout,
+})
+
+function PostsLayout() {
+  return <Outlet />
+}
+```
+
+Place `<Outlet />` wherever the child route should render within any shared
+layout UI. If the parent route does not need a component, remove the generated
+`component` option instead; a route without a component renders an outlet
+automatically.
+
 ## Defining Routes
 
 To define a route, use the `createFileRoute` function to export the route as the `Route` variable.