docs: Add route-level head explanation and example #5484
Conversation
Added section on route-level document head management with example code.
WalkthroughAdds a Route-level Document Head section to the React guide showing how to use a route Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
![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 (1)
docs/router/framework/react/guide/document-head-management.md (1)
68-68: Use a descriptive, relative docs linkPer our docs guidelines, link text shouldn’t be “here” and links must stay within the docs tree. Please update the anchor text (e.g. “RouteOptionsType head method”) and link it relatively:
../api/router/RouteOptionsType#head-method.As per coding guidelines
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/router/framework/react/guide/document-head-management.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/router/framework/react/guide/document-head-management.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/router/framework/react/guide/document-head-management.md
🪛 LanguageTool
docs/router/framework/react/guide/document-head-management.md
[grammar] ~67-~67: There might be a mistake here.
Context: ... title or meta tags based on route data. You can find the full list of available ...
(QB_NEW_EN)
🪛 markdownlint-cli2 (0.18.1)
docs/router/framework/react/guide/document-head-management.md
68-68: Link text should be descriptive
(MD059, descriptive-link-text)
| export const Route = createRootRoute({ | ||
| loader: async ({ params }) { | ||
| const id = params.id; | ||
| return await fetchPost({ id }); | ||
| }, | ||
| head: (context) => ({ | ||
| meta: [ | ||
| { | ||
| name: 'description', | ||
| content: context.loaderData.content.slice(0, 100), | ||
| }, | ||
| { | ||
| title: context.loaderData.title, | ||
| }, | ||
| ], | ||
| }), | ||
| }) |
There was a problem hiding this comment.
Fix the route example: createRootRoute has no params.id
createRootRoute never receives dynamic params, so params.id will always be undefined and the sample fetch call fails. Please switch the snippet to a parametrized route (e.g. createFileRoute('/posts/$postId')) and reference the actual param/key returned by the loader. That keeps the example accurate and prevents readers from copying a broken pattern.
🤖 Prompt for AI Agents
In docs/router/framework/react/guide/document-head-management.md around lines
71–87, the example uses createRootRoute and params.id (which is always
undefined); change the route to a parametrized route (e.g. use
createFileRoute('/posts/$postId') instead of createRootRoute), update the loader
to read the dynamic param from params.postId and pass that into fetchPost, and
keep the head accessor using the actual loader return shape (e.g.
context.loaderData.title and context.loaderData.content.slice(0,100)); this
ensures the example uses a route that receives params and references the correct
param key.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
docs/router/framework/react/guide/document-head-management.md (1)
65-88: Still need a parametrized route & correct param keyThe snippet still reads
params.id, but this route never defines anidparam—createFileRoutemust be given a parametrized path (e.g./posts/$postId), and the loader should readparams.postId. Without that, the fetch example keeps receivingundefined. Please update the example to declare the dynamic segment and use the actual param key returned by the loader.
🧹 Nitpick comments (1)
docs/router/framework/react/guide/document-head-management.md (1)
68-68: Use descriptive, relative link textDocs lint flags the “here” link. Please switch to descriptive link text (e.g. “
RouteOptionsType#headdocs”) and make it relative to this guide, per docs linking guidelines (../api/router/RouteOptionsType#head-method).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/router/framework/react/guide/document-head-management.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use internal docs links relative to the docs/ folder (e.g., ./guide/data-loading)
Files:
docs/router/framework/react/guide/document-head-management.md
docs/{router,start}/**
📄 CodeRabbit inference engine (AGENTS.md)
Place router docs under docs/router/ and start framework docs under docs/start/
Files:
docs/router/framework/react/guide/document-head-management.md
🪛 LanguageTool
docs/router/framework/react/guide/document-head-management.md
[grammar] ~67-~67: There might be a mistake here.
Context: ... title or meta tags based on route data. You can find the full list of available ...
(QB_NEW_EN)
🪛 markdownlint-cli2 (0.18.1)
docs/router/framework/react/guide/document-head-management.md
68-68: Link text should be descriptive
(MD059, descriptive-link-text)
1 participant
I needed to set different titles for same page with different data and found that this can be done using the
head(ctx)function.It wasn’t clearly mentioned in the current docs, but my editor suggested the
head(ctx)syntax, which worked as expected.Since most other frameworks include a short explanation or example for this pattern, I thought it would be helpful to add a brief note here as well.
English is not my first language, so the added sentence and this description was refined with AI assistance — please feel free to adjust the wording if needed.
Summary by CodeRabbit