MatchRoute component fails with custom parse/stringify for numeric route params

[charlotteVanDV]

Which project does this relate to?

Router

Describe the bug

There's an issue with the MatchRoute component when used in conjunction with routes that have custom parse/stringify functions for handling numeric parameters. Specifically, the component fails to match when provided with a number, but works correctly when given a string.

Your Example Website or App

https://stackblitz.com/github/tanstack/router/tree/main/examples/react/kitchen-sink?embed=1&theme=dark&preset=node&file=src/main.tsx

Steps to Reproduce the Bug or Issue

1. Define a route with a custom parse/stringify for a numeric parameter, e.g.:

   const invoiceRoute = createRoute({
     // ...other config
     path: '$invoiceId',
     params: {
       parse: (params) => ({
         invoiceId: z.number().int().parse(Number(params.invoiceId)),
       }),
       stringify: ({ invoiceId }) => ({ invoiceId: `${invoiceId}` }),
     },
     // ...rest of the route config
   })

2. Use the MatchRoute component with a numeric value:

   <MatchRoute
     to={invoiceRoute.to}
     params={{
       invoiceId: 123, // Using a number
     }}
     pending
   >
     {(match) => <Spinner show={!!match} wait="delay-50" />}
   </MatchRoute>

3. Observe that the match fails and the component doesn't render as expected.

4. Change the invoiceId to a string:

   <MatchRoute
     to={invoiceRoute.to}
     params={{
       invoiceId: "123", // Using a string
     }}
     pending
   >
     {(match) => <Spinner show={!!match} wait="delay-50" />}
   </MatchRoute>

5. Observe that the match now succeeds and the component renders correctly.

Expected behavior

The MatchRoute component should work correctly with both numeric and string values when a custom parse/stringify is defined for the route parameter.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 1.58.16

Additional context

This issue appears to be related to how the MatchRoute component interacts with the custom parse/stringify functions defined for route parameters. It seems that the component might be bypassing or incorrectly applying these functions when attempting to match the route.

[tomhicks]

Found this while suffering with the same problem with useMatchRoute. Our url slugs can be formed either as IDs or as human-readable-prefixed IDs, e.g. /thing/abc123 or /thing/Title-of-the-thing-abc123.

I've just implemented the params.parse function in createRoute and it causes the useMatchRoute()({to: "/thing/$thingId", params: {thingId: passedDownFromParsedPathParams}) to fail to match. We're passing the parsed version of the ID, but the internal matching logic is using the original ID directly from the URL, presumably.

[valerii15298]

Types are also broken in this case. The param in my case is specified as number, but when I pass number - the matchRoute function always returns false. Passing string works as expected...