From 0e159fe815f609881f463204ed1ace9507738e1d Mon Sep 17 00:00:00 2001 From: Thomas Conway Date: Sun, 2 Aug 2026 02:44:20 +0100 Subject: [PATCH] docs(start): explain generated layout routes --- docs/start/framework/react/guide/routing.md | 15 +++++++++++++++ docs/start/framework/solid/guide/routing.md | 15 +++++++++++++++ 2 files changed, 30 insertions(+) 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: ``` +The `posts.tsx` file is a layout route, so it must render an `` 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 +} +``` + ## 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: ``` +The `posts.tsx` file is a layout route, so it must render an `` 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 +} +``` + ## Types of Routes There are a few different types of routes that you can create in your project.