useCurrentMatches only returns one match

[RndUsername]

Describe the bug

When I use useCurrentMatches with the FileRouter and nested paths, I only get one match, i.e. ['test1/test2/test3'] instead of ['test1', 'test2', 'test3']

Your Example Website or App

https://stackblitz.com/edit/github-grada5-8t8kru5v?file=README.md

Steps to Reproduce the Bug or Issue

use useCurrentMatches as described in the docs

Expected behavior

useCurrentMatches should return multiple matches if I have nested paths

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome, Firefox

Additional context

No response

[RndUsername]

I asked in the Discord before, and they said it's a bug and I should report it here.

[alfi-dim]

any update for this?

[alfi-dim]

do workaround, i hope this help.

being the return of useCurrentMatches is like this:

[
  {
    "path": "/",
    "params": {},
    "route": {
      "key": {
        "page": true,
        "$component": {
          "src": "src\\routes\\(protected).tsx?pick=default&pick=$css"
        },
        "path": "/",
        "id": "/(protected)",
        "children": [
          {
            "page": true,
            "$component": {
              "src": "src\\routes\\(protected)\\index.tsx?pick=default&pick=$css"
            },
            "path": "/",
            "id": "/",
            "info": {
              "filesystem": true
            }
          },
          {
            "page": true,
            "$component": {
              "src": "src\\routes\\(protected)\\facility\\[id].tsx?pick=default&pick=$css"
            },
            "$$route": {},
            "path": "/facility/:id",
            "id": "/facility/:id",
            "info": {
              "title": "Facility",
              "description": "Detail facility",
              "breadcrumb": {
                "href": "#",
                "label": "Detail Facility"
              },
              "filesystem": true
            }
          },
          {
            "page": true,
            "$component": {
              "src": "src\\routes\\(protected)\\facility\\(facility).tsx?pick=default&pick=$css"
            },
            "$$route": {},
            "path": "/facility/",
            "id": "/facility/(facility)",
            "info": {
              "title": "Facility",
              "description": "Manage facilities",
              "breadcrumb": {
                "href": "/facility",
                "label": "Facility"
              },
              "filesystem": true
            }
          }
        ],
        "info": {
          "filesystem": true
        }
      },
      "info": {
        "filesystem": true
      },
      "originalPath": "/",
      "pattern": ""
    }
  },
  {
    "path": "/facility",
    "params": {},
    "route": {
      "key": {
        "page": true,
        "$component": {
          "src": "src\\routes\\(protected)\\facility\\(facility).tsx?pick=default&pick=$css"
        },
        "$$route": {},
        "path": "/facility/",
        "id": "/facility/(facility)",
        "info": {
          "title": "Facility",
          "description": "Manage facilities",
          "breadcrumb": {
            "href": "/facility",
            "label": "Facility"
          },
          "filesystem": true
        }
      },
      "info": {
        "title": "Facility",
        "description": "Manage facilities",
        "breadcrumb": {
          "href": "/facility",
          "label": "Facility"
        },
        "filesystem": true
      },
      "originalPath": "/facility/",
      "pattern": "/facility/"
    }
  }
]

i see that the "children" prop is including all route info from all nested route, so i create this ugly thing:

const firstMatchChildren = (
    matches()?.[0]?.route?.key as {
      children: { info?: { breadcrumb: { href: string; label: string } } }[];
    }
  )?.children;

const breadcrumbs = createMemo(() =>
   [
      firstMatchChildren[0], // The first child of the first match is always the root route (index)
      ...firstMatchChildren.slice(1).toReversed(),
    ].reduce(
        (breadcrumb, match, _, arr) => {
          const currentPageMatch = matches()?.[1]?.route?.info?.breadcrumb;
          const crumb = match.info?.breadcrumb;
          if (crumb) {
            breadcrumb.push(crumb);
          }
          if (currentPageMatch.label === match.info?.breadcrumb.label) {
            arr.splice(1); //break the loop early
          }
          return breadcrumb;
        },
        [] as { href: string; label: string }[],
      ),
  );

ps: just make sure that your route info definition is like this:

export const route = {
  info: {
    breadcrumb: {
      href: '/page',
      label: 'Page Name',
    },
  },
} satisfies RouteDefinition;