diff --git a/docs/start/framework/react/guide/routing.md b/docs/start/framework/react/guide/routing.md
index 30d97a8241..c6750d06f9 100644
--- a/docs/start/framework/react/guide/routing.md
+++ b/docs/start/framework/react/guide/routing.md
@@ -172,6 +172,21 @@ The component tree would look like this:
 </Root>
 ```
 
+The `posts.tsx` file is a layout route, so it must render an `<Outlet />` for the child route to appear. If the route generator has created a standalone page component when you add `posts.tsx`, replace it with a layout component before adding `posts/index.tsx` or `posts/$postId.tsx`:
+
+```tsx
+// src/routes/posts.tsx
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts')({
+  component: PostsLayout,
+})
+
+function PostsLayout() {
+  return <Outlet />
+}
+```
+
 ## Types of Routes
 
 There are a few different types of routes that you can create in your project.
diff --git a/docs/start/framework/solid/guide/routing.md b/docs/start/framework/solid/guide/routing.md
index b33b6180ad..7058cab4aa 100644
--- a/docs/start/framework/solid/guide/routing.md
+++ b/docs/start/framework/solid/guide/routing.md
@@ -168,6 +168,21 @@ The component tree would look like this:
 </Root>
 ```
 
+The `posts.tsx` file is a layout route, so it must render an `<Outlet />` for the child route to appear. If the route generator has created a standalone page component when you add `posts.tsx`, replace it with a layout component before adding `posts/index.tsx` or `posts/$postId.tsx`:
+
+```tsx
+// src/routes/posts.tsx
+import { Outlet, createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/posts')({
+  component: PostsLayout,
+})
+
+function PostsLayout() {
+  return <Outlet />
+}
+```
+
 ## Types of Routes
 
 There are a few different types of routes that you can create in your project.