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`