From 2537435290c346ee58624299450bd2a1ebca0649 Mon Sep 17 00:00:00 2001
From: Florian Bienefelt <florian.bienefelt@gmail.com>
Date: Tue, 26 Aug 2025 10:21:50 +0200
Subject: [PATCH 1/3] Explain how to use router context in react components

---
 docs/router/framework/react/guide/router-context.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/docs/router/framework/react/guide/router-context.md b/docs/router/framework/react/guide/router-context.md
index 561b1e2f003..27a89a8df21 100644
--- a/docs/router/framework/react/guide/router-context.md
+++ b/docs/router/framework/react/guide/router-context.md
@@ -98,6 +98,19 @@ export const Route = createFileRoute('/todos')({
 })
 ```
 
+You can use it in your components with the `useRouteContext` hook:
+
+```tsx
+import { useRouteContext } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/todos')({ component: Todos });
+
+function Todos() {
+  const routeContext = useRouteContext({ from: Route.id });
+  return <div>Todos from {routeContext.user.id}</div>
+}
+```
+
 You can even inject data fetching and mutation implementations themselves! In fact, this is highly recommended 😜
 
 Let's try this with a simple function to fetch some todos:

From cf0aa6e45fa9b98d665df2a2e97d70851a7815a0 Mon Sep 17 00:00:00 2001
From: Florian Bienefelt <florian.bienefelt@gmail.com>
Date: Tue, 26 Aug 2025 11:18:49 +0200
Subject: [PATCH 2/3] Use Route.useRouteContext() directly

---
 docs/router/framework/react/guide/router-context.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/router/framework/react/guide/router-context.md b/docs/router/framework/react/guide/router-context.md
index 27a89a8df21..2e9e6154ef9 100644
--- a/docs/router/framework/react/guide/router-context.md
+++ b/docs/router/framework/react/guide/router-context.md
@@ -106,7 +106,7 @@ import { useRouteContext } from '@tanstack/react-router'
 export const Route = createFileRoute('/todos')({ component: Todos });
 
 function Todos() {
-  const routeContext = useRouteContext({ from: Route.id });
+  const routeContext = Route.useRouteContext();
   return <div>Todos from {routeContext.user.id}</div>
 }
 ```

From 244ac55ddc1db97f8fc066332b4ac057f6e49d99 Mon Sep 17 00:00:00 2001
From: Florian Bienefelt <florian.bienefelt@gmail.com>
Date: Tue, 26 Aug 2025 23:24:24 +0200
Subject: [PATCH 3/3] Import all dependencies

---
 docs/router/framework/react/guide/router-context.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/router/framework/react/guide/router-context.md b/docs/router/framework/react/guide/router-context.md
index 2e9e6154ef9..6e794770bdf 100644
--- a/docs/router/framework/react/guide/router-context.md
+++ b/docs/router/framework/react/guide/router-context.md
@@ -101,13 +101,13 @@ export const Route = createFileRoute('/todos')({
 You can use it in your components with the `useRouteContext` hook:
 
 ```tsx
-import { useRouteContext } from '@tanstack/react-router'
+import { createFileRoute, useRouteContext } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/todos')({ component: Todos });
 
 function Todos() {
   const routeContext = Route.useRouteContext();
-  return <div>Todos from {routeContext.user.id}</div>
+  return <div>Todos from {routeContext.user.id}</div>;
 }
 ```