fix(router): ensure useParams returns parsed params when strict is false (#6387)

* fix: optimize match retrieval by using a Map for previous matches

* feat: add strict false parameter handling and related routes

* replace params only when routeParams is fully parsed

---------

Co-authored-by: Nico Lynzaad <nlynzaad@zylangroup.com>
Co-authored-by: Nico Lynzaad <44094871+nlynzaad@users.noreply.github.com>

Author: jong-kyung

e2e/react-router/basic-file-based/src/routeTree.gen.ts

@@ -42,6 +42,7 @@ import { Route as anotherGroupOnlyrouteinsideRouteImport } from './routes/(anoth
 import { Route as RelativeUseNavigateRouteRouteImport } from './routes/relative/useNavigate/route'
 import { Route as RelativeLinkRouteRouteImport } from './routes/relative/link/route'
 import { Route as PathlessLayoutLayoutRouteRouteImport } from './routes/pathless-layout/_layout/route'
+import { Route as ParamsPsStrictFalseRouteRouteImport } from './routes/params-ps/strict-false/route'
 import { Route as ParamsPsNonNestedRouteRouteImport } from './routes/params-ps/non-nested/route'
 import { Route as NonNestedSuffixRouteRouteImport } from './routes/non-nested/suffix/route'
 import { Route as NonNestedPrefixRouteRouteImport } from './routes/non-nested/prefix/route'
@@ -87,6 +88,7 @@ import { Route as LayoutLayout2LayoutBRouteImport } from './routes/_layout/_layo
 import { Route as LayoutLayout2LayoutARouteImport } from './routes/_layout/_layout-2/layout-a'
 import { Route as groupSubfolderInsideRouteImport } from './routes/(group)/subfolder/inside'
 import { Route as groupLayoutInsidelayoutRouteImport } from './routes/(group)/_layout.insidelayout'
+import { Route as ParamsPsStrictFalseVersionRouteRouteImport } from './routes/params-ps/strict-false/$version.route'
 import { Route as ParamsPsNonNestedFooRouteRouteImport } from './routes/params-ps/non-nested/$foo_/route'
 import { Route as ParamsPsNamedFooRouteRouteImport } from './routes/params-ps/named/$foo/route'
 import { Route as NonNestedSuffixChar123bazChar125suffixRouteRouteImport } from './routes/non-nested/suffix/{$baz}suffix.route'
@@ -295,6 +297,12 @@ const PathlessLayoutLayoutRouteRoute =
     id: '/_layout',
     getParentRoute: () => PathlessLayoutRouteRoute,
   } as any)
+const ParamsPsStrictFalseRouteRoute =
+  ParamsPsStrictFalseRouteRouteImport.update({
+    id: '/params-ps/strict-false',
+    path: '/params-ps/strict-false',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const ParamsPsNonNestedRouteRoute = ParamsPsNonNestedRouteRouteImport.update({
   id: '/params-ps/non-nested',
   path: '/params-ps/non-nested',
@@ -539,6 +547,12 @@ const groupLayoutInsidelayoutRoute = groupLayoutInsidelayoutRouteImport.update({
   path: '/insidelayout',
   getParentRoute: () => groupLayoutRoute,
 } as any)
+const ParamsPsStrictFalseVersionRouteRoute =
+  ParamsPsStrictFalseVersionRouteRouteImport.update({
+    id: '/$version',
+    path: '/$version',
+    getParentRoute: () => ParamsPsStrictFalseRouteRoute,
+  } as any)
 const ParamsPsNonNestedFooRouteRoute =
   ParamsPsNonNestedFooRouteRouteImport.update({
     id: '/$foo_',
@@ -780,6 +794,7 @@ export interface FileRoutesByFullPath {
   '/non-nested/prefix': typeof NonNestedPrefixRouteRouteWithChildren
   '/non-nested/suffix': typeof NonNestedSuffixRouteRouteWithChildren
   '/params-ps/non-nested': typeof ParamsPsNonNestedRouteRouteWithChildren
+  '/params-ps/strict-false': typeof ParamsPsStrictFalseRouteRouteWithChildren
   '/relative/link': typeof RelativeLinkRouteRouteWithChildren
   '/relative/useNavigate': typeof RelativeUseNavigateRouteRouteWithChildren
   '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
@@ -801,6 +816,7 @@ export interface FileRoutesByFullPath {
   '/non-nested/suffix/{$baz}suffix': typeof NonNestedSuffixChar123bazChar125suffixRouteRouteWithChildren
   '/params-ps/named/$foo': typeof ParamsPsNamedFooRouteRouteWithChildren
   '/params-ps/non-nested/$foo': typeof ParamsPsNonNestedFooRouteRouteWithChildren
+  '/params-ps/strict-false/$version': typeof ParamsPsStrictFalseVersionRouteRoute
   '/insidelayout': typeof groupLayoutInsidelayoutRoute
   '/subfolder/inside': typeof groupSubfolderInsideRoute
   '/layout-a': typeof LayoutLayout2LayoutARoute
@@ -892,6 +908,7 @@ export interface FileRoutesByTo {
   '/non-nested/prefix': typeof NonNestedPrefixRouteRouteWithChildren
   '/non-nested/suffix': typeof NonNestedSuffixRouteRouteWithChildren
   '/params-ps/non-nested': typeof ParamsPsNonNestedRouteRouteWithChildren
+  '/params-ps/strict-false': typeof ParamsPsStrictFalseRouteRouteWithChildren
   '/relative/link': typeof RelativeLinkRouteRouteWithChildren
   '/relative/useNavigate': typeof RelativeUseNavigateRouteRouteWithChildren
   '/onlyrouteinside': typeof anotherGroupOnlyrouteinsideRoute
@@ -907,6 +924,7 @@ export interface FileRoutesByTo {
   '/search-params': typeof SearchParamsIndexRoute
   '/params-ps/named/$foo': typeof ParamsPsNamedFooRouteRouteWithChildren
   '/params-ps/non-nested/$foo': typeof ParamsPsNonNestedFooRouteRouteWithChildren
+  '/params-ps/strict-false/$version': typeof ParamsPsStrictFalseVersionRouteRoute
   '/insidelayout': typeof groupLayoutInsidelayoutRoute
   '/subfolder/inside': typeof groupSubfolderInsideRoute
   '/layout-a': typeof LayoutLayout2LayoutARoute
@@ -999,6 +1017,7 @@ export interface FileRoutesById {
   '/non-nested/prefix': typeof NonNestedPrefixRouteRouteWithChildren
   '/non-nested/suffix': typeof NonNestedSuffixRouteRouteWithChildren
   '/params-ps/non-nested': typeof ParamsPsNonNestedRouteRouteWithChildren
+  '/params-ps/strict-false': typeof ParamsPsStrictFalseRouteRouteWithChildren
   '/pathless-layout/_layout': typeof PathlessLayoutLayoutRouteRouteWithChildren
   '/relative/link': typeof RelativeLinkRouteRouteWithChildren
   '/relative/useNavigate': typeof RelativeUseNavigateRouteRouteWithChildren
@@ -1023,6 +1042,7 @@ export interface FileRoutesById {
   '/non-nested/suffix/{$baz}suffix': typeof NonNestedSuffixChar123bazChar125suffixRouteRouteWithChildren
   '/params-ps/named/$foo': typeof ParamsPsNamedFooRouteRouteWithChildren
   '/params-ps/non-nested/$foo_': typeof ParamsPsNonNestedFooRouteRouteWithChildren
+  '/params-ps/strict-false/$version': typeof ParamsPsStrictFalseVersionRouteRoute
   '/(group)/_layout/insidelayout': typeof groupLayoutInsidelayoutRoute
   '/(group)/subfolder/inside': typeof groupSubfolderInsideRoute
   '/_layout/_layout-2/layout-a': typeof LayoutLayout2LayoutARoute
@@ -1118,6 +1138,7 @@ export interface FileRouteTypes {
     | '/non-nested/prefix'
     | '/non-nested/suffix'
     | '/params-ps/non-nested'
+    | '/params-ps/strict-false'
     | '/relative/link'
     | '/relative/useNavigate'
     | '/onlyrouteinside'
@@ -1139,6 +1160,7 @@ export interface FileRouteTypes {
     | '/non-nested/suffix/{$baz}suffix'
     | '/params-ps/named/$foo'
     | '/params-ps/non-nested/$foo'
+    | '/params-ps/strict-false/$version'
     | '/insidelayout'
     | '/subfolder/inside'
     | '/layout-a'
@@ -1230,6 +1252,7 @@ export interface FileRouteTypes {
     | '/non-nested/prefix'
     | '/non-nested/suffix'
     | '/params-ps/non-nested'
+    | '/params-ps/strict-false'
     | '/relative/link'
     | '/relative/useNavigate'
     | '/onlyrouteinside'
@@ -1245,6 +1268,7 @@ export interface FileRouteTypes {
     | '/search-params'
     | '/params-ps/named/$foo'
     | '/params-ps/non-nested/$foo'
+    | '/params-ps/strict-false/$version'
     | '/insidelayout'
     | '/subfolder/inside'
     | '/layout-a'
@@ -1336,6 +1360,7 @@ export interface FileRouteTypes {
     | '/non-nested/prefix'
     | '/non-nested/suffix'
     | '/params-ps/non-nested'
+    | '/params-ps/strict-false'
     | '/pathless-layout/_layout'
     | '/relative/link'
     | '/relative/useNavigate'
@@ -1360,6 +1385,7 @@ export interface FileRouteTypes {
     | '/non-nested/suffix/{$baz}suffix'
     | '/params-ps/named/$foo'
     | '/params-ps/non-nested/$foo_'
+    | '/params-ps/strict-false/$version'
     | '/(group)/_layout/insidelayout'
     | '/(group)/subfolder/inside'
     | '/_layout/_layout-2/layout-a'
@@ -1450,6 +1476,7 @@ export interface RootRouteChildren {
   PostsRoute: typeof PostsRouteWithChildren
   RemountDepsRoute: typeof RemountDepsRoute
   ParamsPsNonNestedRouteRoute: typeof ParamsPsNonNestedRouteRouteWithChildren
+  ParamsPsStrictFalseRouteRoute: typeof ParamsPsStrictFalseRouteRouteWithChildren
   RelativeLinkRouteRoute: typeof RelativeLinkRouteRouteWithChildren
   RelativeUseNavigateRouteRoute: typeof RelativeUseNavigateRouteRouteWithChildren
   anotherGroupOnlyrouteinsideRoute: typeof anotherGroupOnlyrouteinsideRoute
@@ -1712,6 +1739,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PathlessLayoutLayoutRouteRouteImport
       parentRoute: typeof PathlessLayoutRouteRoute
     }
+    '/params-ps/strict-false': {
+      id: '/params-ps/strict-false'
+      path: '/params-ps/strict-false'
+      fullPath: '/params-ps/strict-false'
+      preLoaderRoute: typeof ParamsPsStrictFalseRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/params-ps/non-nested': {
       id: '/params-ps/non-nested'
       path: '/params-ps/non-nested'
@@ -2027,6 +2061,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof groupLayoutInsidelayoutRouteImport
       parentRoute: typeof groupLayoutRoute
     }
+    '/params-ps/strict-false/$version': {
+      id: '/params-ps/strict-false/$version'
+      path: '/$version'
+      fullPath: '/params-ps/strict-false/$version'
+      preLoaderRoute: typeof ParamsPsStrictFalseVersionRouteRouteImport
+      parentRoute: typeof ParamsPsStrictFalseRouteRoute
+    }
     '/params-ps/non-nested/$foo_': {
       id: '/params-ps/non-nested/$foo_'
       path: '/$foo'
@@ -2669,6 +2710,20 @@ const ParamsPsNonNestedRouteRouteWithChildren =
     ParamsPsNonNestedRouteRouteChildren,
   )
 
+interface ParamsPsStrictFalseRouteRouteChildren {
+  ParamsPsStrictFalseVersionRouteRoute: typeof ParamsPsStrictFalseVersionRouteRoute
+}
+
+const ParamsPsStrictFalseRouteRouteChildren: ParamsPsStrictFalseRouteRouteChildren =
+  {
+    ParamsPsStrictFalseVersionRouteRoute: ParamsPsStrictFalseVersionRouteRoute,
+  }
+
+const ParamsPsStrictFalseRouteRouteWithChildren =
+  ParamsPsStrictFalseRouteRoute._addFileChildren(
+    ParamsPsStrictFalseRouteRouteChildren,
+  )
+
 interface RelativeLinkRouteRouteChildren {
   RelativeLinkRelativeLinkARoute: typeof RelativeLinkRelativeLinkARoute
   RelativeLinkRelativeLinkBRoute: typeof RelativeLinkRelativeLinkBRoute
@@ -2811,6 +2866,7 @@ const rootRouteChildren: RootRouteChildren = {
   PostsRoute: PostsRouteWithChildren,
   RemountDepsRoute: RemountDepsRoute,
   ParamsPsNonNestedRouteRoute: ParamsPsNonNestedRouteRouteWithChildren,
+  ParamsPsStrictFalseRouteRoute: ParamsPsStrictFalseRouteRouteWithChildren,
   RelativeLinkRouteRoute: RelativeLinkRouteRouteWithChildren,
   RelativeUseNavigateRouteRoute: RelativeUseNavigateRouteRouteWithChildren,
   anotherGroupOnlyrouteinsideRoute: anotherGroupOnlyrouteinsideRoute,

e2e/react-router/basic-file-based/src/routes/params-ps/index.tsx

@@ -122,6 +122,28 @@ function RouteComponent() {
           </Link>
         </li>
       </ul>
+      <hr />
+      <h3 className="pb-2">Parsed params with strict false</h3>
+      <ul className="grid mb-2">
+        <li>
+          <Link
+            data-testid="strict-false-version-1"
+            to="/params-ps/strict-false/$version"
+            params={{ version: 1 }}
+          >
+            /params-ps/strict-false/$version (1)
+          </Link>
+        </li>
+        <li>
+          <Link
+            data-testid="strict-false-version-2"
+            to="/params-ps/strict-false/$version"
+            params={{ version: 2 }}
+          >
+            /params-ps/strict-false/$version (2)
+          </Link>
+        </li>
+      </ul>
     </div>
   )
 }

e2e/react-router/basic-file-based/src/routes/params-ps/strict-false/$version.route.tsx

@@ -0,0 +1,21 @@
+import { createFileRoute, useParams } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/params-ps/strict-false/$version')({
+  params: {
+    parse: (params) => ({
+      ...params,
+      version: parseInt(params.version),
+    }),
+    stringify: (params) => ({
+      ...params,
+      version: `${params.version}`,
+    }),
+  },
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { version } = useParams({ strict: false })
+
+  return <div data-testid="strict-false-child-version">{String(version)}</div>
+}

e2e/react-router/basic-file-based/src/routes/params-ps/strict-false/route.tsx

@@ -0,0 +1,44 @@
+import {
+  Link,
+  Outlet,
+  createFileRoute,
+  useParams,
+} from '@tanstack/react-router'
+
+export const Route = createFileRoute('/params-ps/strict-false')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { version } = useParams({ strict: false })
+  return (
+    <div>
+      <h3>ParamsStrictFalseParse</h3>
+      <div>
+        Type:{' '}
+        <span data-testid="strict-false-version-type">{typeof version}</span>
+      </div>
+      <div>
+        Value:{' '}
+        <span data-testid="strict-false-version-value">{String(version)}</span>
+      </div>
+      <Link
+        data-testid="strict-false-version-1"
+        from={Route.fullPath}
+        to="./$version"
+        params={{ version: 1 }}
+      >
+        Version 1
+      </Link>
+      <Link
+        data-testid="strict-false-version-2"
+        from={Route.fullPath}
+        to="./$version"
+        params={{ version: 2 }}
+      >
+        Version 2
+      </Link>
+      <Outlet />
+    </div>
+  )
+}

e2e/react-router/basic-file-based/tests/params.spec.ts

@@ -492,3 +492,29 @@ test.describe('Unicode params', () => {
     })
   })
 })
+
+test.describe('useParams strict false uses parsed child params', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/params-ps')
+  })
+
+  test('parent receives parsed values after child navigation', async ({
+    page,
+  }) => {
+    await page.getByTestId('strict-false-version-1').click()
+    await page.waitForURL('/params-ps/strict-false/1')
+
+    await expect(page.getByTestId('strict-false-version-type')).toHaveText(
+      'number',
+    )
+    await expect(page.getByTestId('strict-false-version-value')).toHaveText('1')
+
+    await page.getByTestId('strict-false-version-2').click()
+    await page.waitForURL('/params-ps/strict-false/2')
+
+    await expect(page.getByTestId('strict-false-version-type')).toHaveText(
+      'number',
+    )
+    await expect(page.getByTestId('strict-false-version-value')).toHaveText('2')
+  })
+})