Bug: Cannot access parent route loaderData in child route head functions
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 15.1k
- Forks
- 1.9k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 143
Description
Which project does this relate to?
Router
Describe the bug
When using child route head functions, the matches array passed to the function only contains the current route's match and does not include parent route matches. This makes it impossible to access typed parent route data (like loaderData from the root route) in child routes for SEO purposes.
Actual Behavior
The matches array only contains the current route's match and does not include parent routes. Although matches.find(m => m.routeId === "__root__") can find the root match, it has type errors and the loaderData is not properly typed.
Current behavior:
matches in /assistance head: [
{
fullPath: "/assistance",
loaderData: undefined
}
]
Setup:
- Root route loader provides global store data:
{ name: "My Store" } - Root route
headfunction correctly receives this data - Child route (
/assistance)headfunction cannot access this data from parent routes
Impact
This prevents proper implementation of SEO meta tags that need to include global site data (like store name, branding) in child route page titles and descriptions.
Possible Solutions
- Include parent route matches in the
matchesarray passed to child routeheadfunctions - Provide a separate utility to access parent route loaderData with proper typing
- Update type definitions to properly type parent route loaderData when accessing via
matches.find()
Your Example Website or App
https://github.com/nestarz/mre-tanstack-load-child
Steps to Reproduce the Bug or Issue
deno install
deno task dev
Then navigate to http://localhost:3456/assistance and check the console logs.
Expected behavior
The matches array in child route head functions should include all parent route matches, allowing access to parent route loaderData for use in meta tags (e.g., appending a store name to page titles).
Example: Desired behavior
head: ({ matches }) => {
const rootMatch = matches.find(m => m.routeId === "__root__");
const storeName = rootMatch?.loaderData?.name; // Should work with proper types
return {
meta: [
{ title: `Page Title — ${storeName}` }
]
}
}
Screenshots or Videos
No response
Platform
"dependencies": {
"@tanstack/react-router": "^1.159.5",
"@tanstack/react-start": "^1.159.5",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.4",
"nitro": "^3.0.1-alpha.2",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"vite": "8.0.0-beta.8"
}
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No source file or test is named in the issue. Start by running the linked reproduction with deno install and deno task dev, then inspect the route head handling and the matches types used for /assistance. Done means child route head functions receive typed parent matches and can read parent loaderData for metadata.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100