Explain how to use router context in react components #5022
Conversation
WalkthroughAdds two documentation examples to the React Router Context guide demonstrating usage of Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
docs/router/framework/react/guide/router-context.md (3)
106-107: Avoid redefining Route inconsistently with the earlier example or clearly make this block standaloneThis block redefines
Routeright after an earlier snippet already defined it. That can be confusing when reading sequentially. Either:
- make this block standalone (keep the redefinition and add the missing import as in the previous comment), or
- assume the prior
Routedefinition and remove these two lines, showing only component usage.If you prefer the latter, apply:
-export const Route = createFileRoute('/todos')({ component: Todos }); - function Todos() {
101-102: Tighten the phrasing to highlight type-safety via from: Route.idMinor copy edit to make the benefit explicit and align with Router docs terminology.
-You can use it in your components with the `useRouteContext` hook: +You can use it in your components with the `useRouteContext` hook. Passing `{ from: Route.id }` ensures the context is typed to this route’s merged context:
109-111: Prefer destructuring for clarity in examplesSmall readability tweak; also mirrors common patterns in the docs.
-function Todos() { - const routeContext = useRouteContext({ from: Route.id }); - return <div>Todos from {routeContext.user.id}</div> -} +function Todos() { + const { user } = useRouteContext({ from: Route.id }) + return <div>Todos from {user.id}</div> +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
docs/router/framework/react/guide/router-context.md(1 hunks)
|
This is also a helpful pattern, but again maybe there is already something built-in? export const Route = createRootRouteWithContext<MyRouterContext>()({
component: RootComponent, // Initialized router context in here
});
// Add this to easily access your root context across your app
export function useRootRouteContext() {
return Route.useRouteContext();
}Can add this in if it makes sense. |
|
Or maybe the best way is this: import { useRouteContext } from '@tanstack/react-router';
export function useRootRouteContext() {
return useRouteContext({ from: "__root__" });
} |
| You can use it in your components with the `useRouteContext` hook: | ||
|
|
||
| ```tsx | ||
| import { createFileRoute, useRouteContext } from '@tanstack/react-router'; |
There was a problem hiding this comment.
I don't think you need this import since you are using Route.useRouteContext
The docs for router context explain how to set it up, and how to use it in loaders, but it doesn't explain how to simply use it in react components. I'm not even sure this is the right way to do it?
Happy to make it better if necessary.
Summary by CodeRabbit