[Bug?]: v7 useMatches not working as expected in route module

[discoverlance-com]

I am not sure if this issue also persists when using the file system routing convention but I noticed it whilst using the Route Configuration convention.

This is my routes as defined below whilst using routes config.

import {
	index,
	layout,
	prefix,
	route,
	type RouteConfig,
} from '@react-router/dev/routes'

export default [
	layout('./routes/public/layout.tsx', [
		index('routes/public/home.tsx'),
		route('forgot-password', 'routes/public/forgot-password.tsx'),
	]),
	...prefix('app', [
		layout('./routes/dashboard/layout.tsx', [
			index('./routes/dashboard/route.tsx'),
			layout('./routes/dashboard/account/layout.tsx', [
				...prefix('account', [
					index('./routes/dashboard/account/route.tsx'),
					route('password', './routes/dashboard/account/password/route.tsx'),
				]),
			]),
		]),
	]),
] satisfies RouteConfig

I have added handle function to the three pages in my app layout, ./routes/dashboard/route.tsx (/app), ./routes/dashboard/account/route.tsx (/app/account) and /routes/dashboard/account/password/route.tsx (/app/account/password).

I am trying to add breadcrumbs to my pages so for each of the handle functions in the 3 pages, I have added some breadcrumb information. See the example below for the breadcrumb information for the route: ./routes/dashboard/account/route.tsx (/app/account).

//./routes/dashboard/account/route.tsx

export const handle = {
	breadcrumb: true,
	href: '/app/account',
	text: 'Account',
}

But when I run useMatches either in the root or in the app route layout, all the matches return quite weird route ids corresponding to the layouts and the current page with each of them having an undefined handle. So I only always get the information from the handle route function defined in the current page. See an example log of the matches from useMatches in the browser below:

[
    {
        "id": "root",
        "pathname": "/",
        "params": {},
        "data": {
            "toastMessage": null,
            "toastType": null,
            "theme": null
        }
    },
    {
        "id": "routes/dashboard/layout",
        "pathname": "/",
        "params": {},
        "data": {
            "defaultSidebarOpen": true,
        }
    },
    {
        "id": "routes/dashboard/account/layout",
        "pathname": "/",
        "params": {},
        "data": null
    },
    {
        "id": "routes/dashboard/account/password/route",
        "pathname": "/app/account/password",
        "params": {},
        "data": null,
        "handle": {
            "breadcrumb": "/app/account/password",
            "href": "/app/account/password",
            "text": "Password"
        }
    }
]

[discoverlance-com]

I also tried this in filebased routing and it's the same result, I am only seeing the handle function from the current page I have visited. The handle from all previous pages (in the nested route) does not show.

[Pouet--]

I also have this exact case where the "pathname" is always "/" in layout routes.

[sergiodxa]

Based on the route you mentioned, that behavior is correct. Every file you mention is a leaf route (it has no routes nested inside). You need to add the handle to the layout routes too.

For example if you're on /app/account/password you will get the matches of these files:

• app/root.tsx
• app/routes/dashboard/layout.tsx
• app/routes/dashboard/account/layout.tsx
• routes/dashboard/account/password/route.tsx

But if you go navigate to /app/account you will get the matches of these other files:

• app/root.tsx
• app/routes/dashboard/layout.tsx
• app/routes/dashboard/account/layout.tsx
• app/routes/dashboard/account/route.tsx

See how the password route file is not matching anymore, so you won't get it, but the first three files are matching. Also if you go to /app now the matches will be reduced to:

• app/root.tsx
• app/routes/dashboard/layout.tsx
• app/routes/dashboard/route.tsx

Now the third one (app/routes/dashboard/account/layout.tsx) is replaced by the index route app/routes/dashboard/route.tsx.

So if you want to get the handle for more matches you need to add them to those files too.