From acfcbcaddf4a8bb31386fb21b8694ccc1c061a5e Mon Sep 17 00:00:00 2001
From: Noah Silas <noah@silas.cc>
Date: Sun, 31 Aug 2025 17:19:44 -0700
Subject: [PATCH] docs: Use named component in react quick-start

When using an anonymous component, Vite's hot reloading doesn't always immediately pick up changes made to the component. This can be confusing to someone testing out the router.

By extracting a named component, Vite seems to be able to match updates to the component to the mounted instance and apply hot reloading as expected.
---
 docs/router/framework/react/quick-start.md | 34 +++++++++++-----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/router/framework/react/quick-start.md b/docs/router/framework/react/quick-start.md
index 07d8812860..db00a639c2 100644
--- a/docs/router/framework/react/quick-start.md
+++ b/docs/router/framework/react/quick-start.md
@@ -76,23 +76,23 @@ Create the following files:
 import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
-export const Route = createRootRoute({
-  component: () => (
-    <>
-      <div className="p-2 flex gap-2">
-        <Link to="/" className="[&.active]:font-bold">
-          Home
-        </Link>{' '}
-        <Link to="/about" className="[&.active]:font-bold">
-          About
-        </Link>
-      </div>
-      <hr />
-      <Outlet />
-      <TanStackRouterDevtools />
-    </>
-  ),
-})
+const RootLayout = () => (
+  <>
+    <div className="p-2 flex gap-2">
+      <Link to="/" className="[&.active]:font-bold">
+        Home
+      </Link>{' '}
+      <Link to="/about" className="[&.active]:font-bold">
+        About
+      </Link>
+    </div>
+    <hr />
+    <Outlet />
+    <TanStackRouterDevtools />
+  </>
+)
+
+export const Route = createRootRoute({ component: RootLayout });
 ```
 
 #### `src/routes/index.tsx`