Skip to content

docs(start): explain that layout routes must render <Outlet> #7852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
deeferentleeg wants to merge 1 commit into
base: main
Choose a base branch
from
+23 −0
Open

docs(start): explain that layout routes must render <Outlet> #7852

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions docs/start/framework/react/guide/routing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,8 @@ The component tree would look like this:
</Root>
```

For this tree to render, the `posts.tsx` layout route's component must render an [`<Outlet />`](#defining-routes) — that's where the matching child route (`<Post />`) is displayed. Without `<Outlet />`, only the `<Posts>` component renders and the child route will not appear.

@coderabbitai coderabbitai Bot Jul 18, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Fix both links to the Outlet documentation. Both additions use #defining-routes, which points to the “Defining Routes” section rather than the existing “The Outlet Component” section.

  • docs/start/framework/react/guide/routing.md#L175-L175: replace the anchor with the correct Outlet-section link.
  • docs/start/framework/react/guide/routing.md#L207-L208: replace the repeated incorrect anchor and follow the relative documentation-link convention.
📍 Affects 1 file
  • docs/start/framework/react/guide/routing.md#L175-L175 (this comment)
  • docs/start/framework/react/guide/routing.md#L207-L208
🤖 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 `@docs/start/framework/react/guide/routing.md` at line 175, Update both Outlet
documentation links in docs/start/framework/react/guide/routing.md at lines
175-175 and 207-208 to use the existing “The Outlet Component” section anchor
instead of `#defining-routes`, preserving the relative documentation-link
convention at the sibling site.

Source: Coding guidelines


## Types of Routes

There are a few different types of routes that you can create in your project.
Expand Down Expand Up @@ -202,6 +204,27 @@ 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 |

> [!NOTE]
> A file like `posts.tsx` is a **layout route** that wraps its child routes (`posts/index.tsx`, `posts/$postId.tsx`). Its component **must render an [`<Outlet />`](#defining-routes)** for the matching child route to appear. The route generator creates a placeholder component for `posts.tsx` that does not include `<Outlet />`, so when you intend `posts.tsx` to be a layout you need to add it manually — otherwise navigating to `/posts/123` renders only the `posts.tsx` component and the child never shows up.
>
> ```tsx
> // src/routes/posts.tsx
> import { Outlet, createFileRoute } from '@tanstack/react-router'
>
> export const Route = createFileRoute('/posts')({
> component: PostsLayoutComponent,
> })
>
> function PostsLayoutComponent() {
> return (
> <div>
> <h1>Posts</h1>
> <Outlet />
> </div>
> )
> }
> ```

## Defining Routes

To define a route, use the `createFileRoute` function to export the route as the `Route` variable.
Expand Down