TanStack / TanStack/router

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

Open
#6,637 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

start-head types
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:
  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.