docs(router): enhance router-context documentation with usage examples

[soheilnikroo]

Added examples demonstrating the use of Route.useRouteContext() and useRouteContext hooks for accessing route context in components. This clarifies how to retrieve context from both the current route and parent routes, improving the documentation for better developer understanding.

Closes #7792

Summary by CodeRabbit

• Documentation
  • Expanded the Router Context guide with a /todos example showing how to access merged route context.
  • Clarified context type narrowing for the current route, including parent and preloading values.
  • Documented how to access context from a different or parent route.

[coderabbitai]

📝 Walkthrough

Walkthrough

The router context guide expands the /todos example with a Todos component using Route.useRouteContext(), and documents the standalone useRouteContext({ from }) hook for accessing context from another route.

Changes

Router context documentation

Layer / File(s)	Summary
Context hook examples docs/router/guide/router-context.md	Adds a Todos component that reads the merged user context and explains route-local type narrowing and parent-route access through useRouteContext({ from }).

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related issues

• docs(router): show route-bound context access in a route component #7792 — The documentation adds the requested route-bound context example and standalone useRouteContext({ from }) explanation.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the documentation update and mentions usage examples added to router-context.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[LadyBluenotes]

Going to leave to @schiller-manuel to give final approval

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 6c180e8

Command	Status	Duration	Result
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	2m 20s	View ↗
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-07-12 13:18:06 UTC

[pkg-pr-new]

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-i18n-paraglide
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-router-react-example-basic-authjs
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-static
• tanstack-start-bun-hosting
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-i18n-paraglide
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-example-rscs
• tanstack-start-streaming-data-from-server-functions
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query
• tanstack-router-vue-example-basic-jsx
• tanstack-router-vue-example-basic-file-based-jsx
• tanstack-router-vue-example-basic-file-based-sfc
• tanstack-router-solid-example-authenticated-routes
• tanstack-router-solid-example-authenticated-routes-firebase
• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-default-search-params
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-basic-ssr-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-basic-virtual-file-based
• tanstack-router-solid-example-basic-virtual-inside-file-based
• tanstack-router-solid-example-deferred-data
• tanstack-router-solid-i18n-paraglide
• tanstack-router-solid-example-kitchen-sink
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-kitchen-sink-solid-query
• tanstack-router-solid-example-kitchen-sink-solid-query-file-based
• tanstack-router-solid-example-large-file-based
• tanstack-router-solid-example-location-masking
• tanstack-router-solid-example-navigation-blocking
• tanstack-router-solid-example-quickstart
• tanstack-router-solid-example-quickstart-esbuild-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-router-solid-example-quickstart-rspack-file-based
• tanstack-router-solid-example-quickstart-webpack-file-based
• @tanstack/router-solid-mono-simple
• router-solid-mono-simple-lazy
• router-solid-monorepo-solid-query
• tanstack-router-solid-example-scroll-restoration
• tanstack-solid-router-search-validator-adapters
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-auth
• tanstack-solid-start-example-basic-authjs
• tanstack-solid-start-example-basic-cloudflare
• tanstack-solid-start-example-basic-netlify
• tanstack-solid-start-example-basic-nitro
• tanstack-start-example-basic-solid-query
• tanstack-solid-start-example-basic-static
• tanstack-solid-start-bun-hosting
• tanstack-solid-start-example-convex-better-auth
• tanstack-solid-start-example-counter
• tanstack-solid-start-i18n-paraglide
• tanstack-solid-start-example-large
• tanstack-solid-start-streaming-data-from-server-functions
• tanstack-solid-start-example-supabase-basic
• tanstack-solid-start-tailwind-v4
• tanstack-router-solid-example-view-transitions
• tanstack-router-solid-example-with-framer-motion
• tanstack-router-solid-example-with-trpc

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@7801

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@7801

@tanstack/eslint-plugin-start

npm i https://pkg.pr.new/@tanstack/eslint-plugin-start@7801

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@7801

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/@tanstack/nitro-v2-vite-plugin@7801

@tanstack/react-router

npm i https://pkg.pr.new/@tanstack/react-router@7801

@tanstack/react-router-devtools

npm i https://pkg.pr.new/@tanstack/react-router-devtools@7801

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/@tanstack/react-router-ssr-query@7801

@tanstack/react-start

npm i https://pkg.pr.new/@tanstack/react-start@7801

@tanstack/react-start-client

npm i https://pkg.pr.new/@tanstack/react-start-client@7801

@tanstack/react-start-rsc

npm i https://pkg.pr.new/@tanstack/react-start-rsc@7801

@tanstack/react-start-server

npm i https://pkg.pr.new/@tanstack/react-start-server@7801

@tanstack/router-cli

npm i https://pkg.pr.new/@tanstack/router-cli@7801

@tanstack/router-core

npm i https://pkg.pr.new/@tanstack/router-core@7801

@tanstack/router-devtools

npm i https://pkg.pr.new/@tanstack/router-devtools@7801

@tanstack/router-devtools-core

npm i https://pkg.pr.new/@tanstack/router-devtools-core@7801

@tanstack/router-generator

npm i https://pkg.pr.new/@tanstack/router-generator@7801

@tanstack/router-plugin

npm i https://pkg.pr.new/@tanstack/router-plugin@7801

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/@tanstack/router-ssr-query-core@7801

@tanstack/router-utils

npm i https://pkg.pr.new/@tanstack/router-utils@7801

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/@tanstack/router-vite-plugin@7801

@tanstack/solid-router

npm i https://pkg.pr.new/@tanstack/solid-router@7801

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/@tanstack/solid-router-devtools@7801

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/@tanstack/solid-router-ssr-query@7801

@tanstack/solid-start

npm i https://pkg.pr.new/@tanstack/solid-start@7801

@tanstack/solid-start-client

npm i https://pkg.pr.new/@tanstack/solid-start-client@7801

@tanstack/solid-start-server

npm i https://pkg.pr.new/@tanstack/solid-start-server@7801

@tanstack/start-client-core

npm i https://pkg.pr.new/@tanstack/start-client-core@7801

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/@tanstack/start-fn-stubs@7801

@tanstack/start-plugin-core

npm i https://pkg.pr.new/@tanstack/start-plugin-core@7801

@tanstack/start-server-core

npm i https://pkg.pr.new/@tanstack/start-server-core@7801

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/@tanstack/start-static-server-functions@7801

@tanstack/start-storage-context

npm i https://pkg.pr.new/@tanstack/start-storage-context@7801

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@7801

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@7801

@tanstack/vue-router

npm i https://pkg.pr.new/@tanstack/vue-router@7801

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/@tanstack/vue-router-devtools@7801

@tanstack/vue-router-ssr-query

npm i https://pkg.pr.new/@tanstack/vue-router-ssr-query@7801

@tanstack/vue-start

npm i https://pkg.pr.new/@tanstack/vue-start@7801

@tanstack/vue-start-client

npm i https://pkg.pr.new/@tanstack/vue-start-client@7801

@tanstack/vue-start-server

npm i https://pkg.pr.new/@tanstack/vue-start-server@7801

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@7801

commit: 6c180e8