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.