useMatchRoute does not match routes with prefix.

[danielknell]

Which project does this relate to?

Router

Describe the bug

if a route uses a path with a prefix like /page-{$page} then useMatchRoute cannot seem to match against it.

import { createFileRoute, useMatchRoute } from '@tanstack/react-router';
import * as React from 'react';

export const Route = createFileRoute('/page-{$page}')({
  component: AboutComponent,
});

function AboutComponent() {
  const matchRoute = useMatchRoute();

  const match = matchRoute({ to: '/page-{$page}' });

  return (
    <div className="p-2">
      <h3>{JSON.stringify(match)}</h3>
    </div>
  );
}

will always show false.

Your Example Website or App

https://stackblitz.com/edit/github-s7nqcjqt?file=src%2Froutes%2Fpage-%7B%24page%7D.tsx

Steps to Reproduce the Bug or Issue

vist /page-a
notice matchRoute result is false

Expected behavior

matchRoute({to: '/page-{$page}'}) to return {"page": "a"} when visiting /page-a instead of false.

Screenshots or Videos

No response

Platform

• Router Version: 1.133.32
• OS: macOS / Linux
• Browser: Safari / Chrome
• Browser Version: 18.6 / 141.0.7390.123
• Bundler: vite
• Bundler Version: 7.1.14

Additional context

Code works fine with routes like /page/$page but seems to specifically fail with the custom routes.

[nlynzaad]

@danielknell I've been working on this and have reached near finality. we are however in the process of a rather large refactor that's nearly completed on the same sections so holding off a bit till that is done.

[danielknell]

@nlynzaad No worries, do you have a non-committal rough feel on how long the blocking refactoring might take? (days/weeks/months/years) so I can decide how hacky a work around can be?