docs: Use named component in react quick-start #5061
Conversation
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.
WalkthroughRefactors the React router quick-start documentation snippet to extract the inline root component into a named RootLayout and reference it via createRootRoute({ component: RootLayout }). No other documentation content changes. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
✨ Finishing Touches🧪 Generate 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. 🪧 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: 0
🧹 Nitpick comments (2)
docs/router/framework/react/quick-start.md (2)
95-95: Nit: drop the trailing semicolon for consistency with surrounding snippetsMost TSX snippets in this doc omit semicolons. Consider aligning style.
Apply:
-export const Route = createRootRoute({ component: RootLayout }); +export const Route = createRootRoute({ component: RootLayout })
79-95: Mirror this pattern in the code-based config example below for consistency/HMRThe “Using Code-Based Route Configuration” section still uses an inline anonymous component for
createRootRoute. Suggest mirroring the named-component pattern to avoid mixed guidance and ensure Fast Refresh behaves consistently.Proposed snippet for that section:
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 /> </> ) const rootRoute = createRootRoute({ component: RootLayout, })
📜 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/quick-start.md(1 hunks)
🔇 Additional comments (1)
docs/router/framework/react/quick-start.md (1)
79-93: Good change: extracted named RootLayout improves React Fast Refresh/HMR reliabilityMoving the inline anonymous component to a named
RootLayoutis a solid docs fix and matches how Vite’s Fast Refresh tracks components.
|
As an aside, I tried to generate this locally to view the ultimate result, but got a bit stuck. So, I'd encourage someone who does have this working to check this out and look at how it renders. I think it should be pretty safe, but I don't love pushing without seeing it 😬 I saw in Contributing.md that this should be tested via the Lines 26 to 27 in 79fe58f pnpm dev crashes:
This looks like a pretty recent addition (first usage I see of |
2 participants
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.
Summary by CodeRabbit