useMatches function is returning wrong pathname

[DanielHGimenez]

Reproduction

Reproduction: https://stackblitz.com/edit/github-o7ejegy8?file=app%2Froutes.ts

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @react-router/dev: ^7.7.1 => 7.8.2 
    @react-router/node: ^7.7.1 => 7.8.2 
    @react-router/serve: ^7.7.1 => 7.8.2 
    react-router: ^7.7.1 => 7.8.2 
    vite: ^6.3.3 => 6.3.5

Used Package Manager

npm

Expected Behavior

The expected pathname of the mentioned route is /dashboard, because the layout is wrapped by a prefix

Actual Behavior

I'm using the useMatches function to retrieve all the related routes of my current page, because I want to use these informations to create a breadcrumb. On the example I have a prefix wrapping a layout that has a index route, and a normal route. When the page is at /dashboard or /dashboard/sub2, the route equivalent for the layout (id: routes/dashboard), has the pathname coming as / instead of /dashboard which is the real path to it.

[joseph0926]

I’m not entirely sure if this is a bug or intended behavior.

In the official docs

Layout Route

"Using layout, layout routes create new nesting for their children, but they don't add any segments to the URL."

Route Prefixes

"Note that this does not introduce a new route into the route tree. Instead, it merely modifies the paths of its children."

And looking at your code examples

// prefix o && layout o && index o => id: routes/dashboard, pathname: /
export default [
  index("routes/home.tsx"),
  ...prefix("dashboard", [
    layout("routes/dashboard.tsx", [
      index("routes/sub1.tsx"),
      route("sub2", "routes/sub2.tsx"),
    ]),
  ]),
] satisfies RouteConfig;

// prefix x && layout o && index x => id: routes/dashboard, pathname: /
export default [
  index("routes/home.tsx"),
  layout("routes/dashboard.tsx", [
    route("dashboard", "routes/sub1.tsx"),
    route("dashboard/sub2", "routes/sub2.tsx"),
  ]),
] satisfies RouteConfig;

// prefix x && layout x && index o => id: routes/dashboard, pathname: /dashboard
export default [
  index("routes/home.tsx"),
  route("dashboard", "routes/dashboard.tsx", [
    index("routes/sub1.tsx"),
    route("sub2", "routes/sub2.tsx"),
  ]),
] satisfies RouteConfig;

From these patterns, it seems (at least to me) that, as the docs suggest, both prefix and layout don’t directly add segments to the URL.
I could be mistaken, but I just wanted to share what I’ve understood so far.

[timdorr]

This was updated in the docs via #14318