-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
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 devThen 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