Skip to content

Bug: Cannot access parent route loaderData in child route head functions #6637

@nestarz

Description

@nestarz

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:

  1. Root route loader provides global store data: { name: "My Store" }
  2. Root route head function correctly receives this data
  3. Child route (/assistance) head function 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

  1. Include parent route matches in the matches array passed to child route head functions
  2. Provide a separate utility to access parent route loaderData with proper typing
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    typesChanges to the typescript types

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions