diff --git a/e2e/react-router/basic-file-based/src/routeTree.gen.ts b/e2e/react-router/basic-file-based/src/routeTree.gen.ts index ad5f737ec7..0453e9ae8a 100644 --- a/e2e/react-router/basic-file-based/src/routeTree.gen.ts +++ b/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, diff --git a/e2e/react-router/basic-file-based/src/routes/params-ps/index.tsx b/e2e/react-router/basic-file-based/src/routes/params-ps/index.tsx index 02235bc3da..b8976b901b 100644 --- a/e2e/react-router/basic-file-based/src/routes/params-ps/index.tsx +++ b/e2e/react-router/basic-file-based/src/routes/params-ps/index.tsx @@ -122,6 +122,28 @@ function RouteComponent() { +
+

Parsed params with strict false

+ ) } diff --git a/e2e/react-router/basic-file-based/src/routes/params-ps/strict-false/$version.route.tsx b/e2e/react-router/basic-file-based/src/routes/params-ps/strict-false/$version.route.tsx new file mode 100644 index 0000000000..6803de8c9b --- /dev/null +++ b/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
{String(version)}
+} diff --git a/e2e/react-router/basic-file-based/src/routes/params-ps/strict-false/route.tsx b/e2e/react-router/basic-file-based/src/routes/params-ps/strict-false/route.tsx new file mode 100644 index 0000000000..f9f96cb7da --- /dev/null +++ b/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 ( +
+

ParamsStrictFalseParse

+
+ Type:{' '} + {typeof version} +
+
+ Value:{' '} + {String(version)} +
+ + Version 1 + + + Version 2 + + +
+ ) +} diff --git a/e2e/react-router/basic-file-based/tests/params.spec.ts b/e2e/react-router/basic-file-based/tests/params.spec.ts index 6b43dba314..a867696ff8 100644 --- a/e2e/react-router/basic-file-based/tests/params.spec.ts +++ b/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') + }) +}) diff --git a/packages/react-router/tests/useParams.test.tsx b/packages/react-router/tests/useParams.test.tsx index 3c15aade31..bb06345850 100644 --- a/packages/react-router/tests/useParams.test.tsx +++ b/packages/react-router/tests/useParams.test.tsx @@ -248,3 +248,73 @@ test('useParams must return parsed result if applicable.', async () => { expect(paramPostIdValue.textContent).toBe('2') expect(mockedfn).toHaveBeenCalledTimes(1) }) + +test('useParams({ strict: false }) returns parsed params after child navigation', async () => { + const rootRoute = createRootRoute() + + const parentRoute = createRoute({ + getParentRoute: () => rootRoute, + path: 'parent', + component: ParentComponent, + }) + + const versionRoute = createRoute({ + getParentRoute: () => parentRoute, + path: '$version', + params: { + parse: (params) => ({ + ...params, + version: parseInt(params.version), + }), + stringify: (params) => ({ + ...params, + version: `${params.version}`, + }), + }, + component: VersionComponent, + }) + + function ParentComponent() { + const { version } = useParams({ strict: false }) + + return ( +
+
{typeof version}
+
{String(version)}
+ + Version 2 + + +
+ ) + } + + function VersionComponent() { + return
Version Route
+ } + + window.history.replaceState({}, '', '/parent/1') + + const router = createRouter({ + routeTree: rootRoute.addChildren([parentRoute.addChildren([versionRoute])]), + }) + + render() + + await act(() => router.load()) + + expect(await screen.findByTestId('version-type')).toHaveTextContent('number') + expect(await screen.findByTestId('version-value')).toHaveTextContent('1') + + const version2Link = await screen.findByTestId('version-2-link') + + await act(() => fireEvent.click(version2Link)) + + expect(await screen.findByTestId('version-route')).toBeInTheDocument() + expect(await screen.findByTestId('version-type')).toHaveTextContent('number') + expect(await screen.findByTestId('version-value')).toHaveTextContent('2') +}) diff --git a/packages/router-core/src/router.ts b/packages/router-core/src/router.ts index d677f5530e..c11f72dbc4 100644 --- a/packages/router-core/src/router.ts +++ b/packages/router-core/src/router.ts @@ -1401,6 +1401,10 @@ export class RouterCore< const matches = new Array(matchedRoutes.length) + const previousMatchesByRouteId = new Map( + this.state.matches.map((match) => [match.routeId, match]), + ) + for (let index = 0; index < matchedRoutes.length; index++) { const route = matchedRoutes[index]! // Take each matched route and resolve + validate its search params @@ -1484,9 +1488,7 @@ export class RouterCore< const existingMatch = this.getMatch(matchId) - const previousMatch = this.state.matches.find( - (d) => d.routeId === route.id, - ) + const previousMatch = previousMatchesByRouteId.get(route.id) const strictParams = existingMatch?._strictParams ?? usedParams @@ -1520,9 +1522,7 @@ export class RouterCore< match = { ...existingMatch, cause, - params: previousMatch - ? replaceEqualDeep(previousMatch.params, routeParams) - : routeParams, + params: previousMatch?.params ?? routeParams, _strictParams: strictParams, search: previousMatch ? replaceEqualDeep(previousMatch.search, preMatchSearch) @@ -1543,9 +1543,7 @@ export class RouterCore< ssr: (isServer ?? this.isServer) ? undefined : route.options.ssr, index, routeId: route.id, - params: previousMatch - ? replaceEqualDeep(previousMatch.params, routeParams) - : routeParams, + params: previousMatch?.params ?? routeParams, _strictParams: strictParams, pathname: interpolatedPath, updatedAt: Date.now(), @@ -1605,7 +1603,11 @@ export class RouterCore< const route = this.looseRoutesById[match.routeId]! const existingMatch = this.getMatch(match.id) - // only execute `context` if we are not calling from router.buildLocation + // Update the match's params + const previousMatch = previousMatchesByRouteId.get(match.routeId) + match.params = previousMatch + ? replaceEqualDeep(previousMatch.params, routeParams) + : routeParams if (!existingMatch) { const parentMatch = matches[index - 1]