fix: useParams in _layout not updating when navigating

packages/one/src/router/router.ts

@@ -585,6 +585,7 @@ function getNavigateAction(
 
     const didActionAndCurrentStateDiverge =
       actionStateRoute.name !== stateRoute.name ||
+      !deepEqual(actionStateRoute.params, stateRoute.params) ||
       !childState ||
       !nextNavigationState ||
       (dynamicName && actionStateRoute.params?.[dynamicName] !== stateRoute.params?.[dynamicName])

tests/test/app/hooks/contents/_layout.tsx

@@ -1,22 +1,24 @@
-import { Link, Slot, usePathname } from 'one'
+import { Slot, useParams, usePathname } from 'one'
 import { View, Text } from 'tamagui'
+import { HooksTestingLinks } from '~/features/hooks-testing/HooksTestingLinks'
 
 export default function HooksTestingLayout() {
   const pathname = usePathname()
+  const params = useParams()
+
   return (
     <View>
-      <Text id="layout-usePathname">Layout `usePathname()`: {pathname}</Text>
+      <Text id="layout-usePathname">
+        Layout `usePathname()`: <Text testID="layout-usePathname">{pathname}</Text>
+      </Text>
+      <Text id="layout-useParams">
+        Layout `useParams()`:{' '}
+        <Text testID="layout-useParams">{JSON.stringify(params)}</Text>
+      </Text>
+
       <Slot />
 
-      <Link href="/hooks/contents/page-1">
-        <Text>Go to page-1</Text>
-      </Link>
-      <Link href="/hooks/contents/page-2">
-        <Text>Go to page-2</Text>
-      </Link>
-      <Link href="/hooks">
-        <Text>Go to index</Text>
-      </Link>
+      <HooksTestingLinks />
     </View>
   )
 }

tests/test/app/hooks/contents/page-1.tsx

@@ -1,13 +1,5 @@
-import { Link, usePathname } from 'one'
-import { View, Text } from 'tamagui'
+import { HooksTestingPageContent } from '~/features/hooks-testing/HooksTestingPageContent'
 
 export default function HooksTestingPage() {
-  const pathname = usePathname()
-
-  return (
-    <View>
-      <Text>This is page-1</Text>
-      <Text id="page-usePathname">Page `usePathname()`: {pathname}</Text>
-    </View>
-  )
+  return <HooksTestingPageContent pageName="page-1" />
 }

tests/test/app/hooks/contents/page-2.tsx

@@ -1,13 +1,5 @@
-import { Link, usePathname } from 'one'
-import { View, Text } from 'tamagui'
+import { HooksTestingPageContent } from '~/features/hooks-testing/HooksTestingPageContent'
 
 export default function HooksTestingPage() {
-  const pathname = usePathname()
-
-  return (
-    <View>
-      <Text>This is page-1</Text>
-      <Text id="page-usePathname">Page `usePathname()`: {pathname}</Text>
-    </View>
-  )
+  return <HooksTestingPageContent pageName="page-2" />
 }

tests/test/app/hooks/contents/with-nested-slug/[folderSlug]/[fileSlug]+ssr.tsx

@@ -0,0 +1,5 @@
+import { HooksTestingPageContent } from '~/features/hooks-testing/HooksTestingPageContent'
+
+export default function HooksTestingPage() {
+  return <HooksTestingPageContent pageName="with-nested-slug/[folderSlug]/[fileSlug]" />
+}

tests/test/app/hooks/contents/with-nested-slug/[folderSlug]/_layout.tsx

@@ -0,0 +1,22 @@
+import { Slot, useParams, usePathname } from 'one'
+import { View, Text, HR } from 'tamagui'
+
+export default function HooksTestingSlugLayout() {
+  const pathname = usePathname()
+  const params = useParams()
+
+  return (
+    <View>
+      <Text id="slug-layout-usePathname">
+        Slug layout `usePathname()`:{' '}
+        <Text testID="slug-layout-usePathname">{pathname}</Text>
+      </Text>
+      <Text id="slug-layout-useParams">
+        Slug layout `useParams()`:{' '}
+        <Text testID="slug-layout-useParams">{JSON.stringify(params)}</Text>
+      </Text>
+
+      <Slot />
+    </View>
+  )
+}

tests/test/app/hooks/contents/with-slug/[slug]+ssr.tsx

@@ -0,0 +1,5 @@
+import { HooksTestingPageContent } from '~/features/hooks-testing/HooksTestingPageContent'
+
+export default function HooksTestingPage() {
+  return <HooksTestingPageContent pageName="with-slug/[slug]" />
+}

tests/test/app/hooks/index.tsx

@@ -1,18 +1,12 @@
-import { Link } from 'one'
-import { View, Text } from 'tamagui'
+import { View, H1 } from 'tamagui'
+import { HooksTestingLinks } from '~/features/hooks-testing/HooksTestingLinks'
 
 export default function HooksTestingIndexPage() {
   return (
     <View>
-      <Link href="/hooks/contents/page-1">
-        <Text>Go to page-1</Text>
-      </Link>
-      <Link href="/hooks/contents/page-2">
-        <Text>Go to page-2</Text>
-      </Link>
-      <Link href="/hooks">
-        <Text>Go to index</Text>
-      </Link>
+      <H1>Hooks Testing Index</H1>
+
+      <HooksTestingLinks />
     </View>
   )
 }

tests/test/app/index.tsx

@@ -46,6 +46,10 @@ export default () => {
         <Button>Open Sheet</Button>
       </Link>
 
+      <Link asChild href="/hooks">
+        <Button>Go to hooks</Button>
+      </Link>
+
       <ToggleThemeButton />
     </YStack>
   )

tests/test/features/hooks-testing/HooksTestingLinks.tsx

@@ -0,0 +1,33 @@
+import { Link } from 'one'
+import { View, Text } from 'tamagui'
+
+export function HooksTestingLinks() {
+  return (
+    <View>
+      <Link href="/hooks/contents/page-1">
+        <Text>Go to page-1</Text>
+      </Link>
+      <Link href="/hooks/contents/page-2">
+        <Text>Go to page-2</Text>
+      </Link>
+
+      <Link href="/hooks/contents/with-slug/slug-page-foo">
+        <Text>Go to with-slug/slug-page-foo</Text>
+      </Link>
+      <Link href="/hooks/contents/with-slug/slug-page-bar">
+        <Text>Go to with-slug/slug-page-bar</Text>
+      </Link>
+
+      <Link href="/hooks/contents/with-nested-slug/foo/bar">
+        <Text>Go to with-nested-slug/foo/bar</Text>
+      </Link>
+      <Link href="/hooks/contents/with-nested-slug/abc/def">
+        <Text>Go to with-nested-slug/abc/def</Text>
+      </Link>
+
+      <Link href="/hooks">
+        <Text>Go to index</Text>
+      </Link>
+    </View>
+  )
+}

tests/test/features/hooks-testing/HooksTestingPageContent.tsx

@@ -0,0 +1,23 @@
+import { useParams, usePathname } from 'one'
+import { View, Text, H1 } from 'tamagui'
+
+type Props = {
+  pageName: string
+}
+
+export function HooksTestingPageContent({ pageName }: Props) {
+  const pathname = usePathname()
+  const params = useParams()
+
+  return (
+    <View>
+      <H1>This is {pageName}</H1>
+      <Text id="page-usePathname">
+        Page `usePathname()`: <Text testID="page-usePathname">{pathname}</Text>
+      </Text>
+      <Text id="page-useParams">
+        Page `useParams()`: <Text testID="page-useParams">{JSON.stringify(params)}</Text>
+      </Text>
+    </View>
+  )
+}

tests/test/routes.d.ts

@@ -7,8 +7,8 @@ declare module 'one' {
   export namespace OneRouter {
     export interface __routes<T extends string = string> extends Record<string, unknown> {
       StaticRoutes: `/` | `/(auth-guard)` | `/(auth-guard)/auth-guard` | `/(blog)` | `/(blog)/blog/my-first-post` | `/(marketing)/about` | `/(sub-page-group)` | `/(sub-page-group)/sub-page` | `/(sub-page-group)/sub-page/sub` | `/(sub-page-group)/sub-page/sub2` | `/_sitemap` | `/about` | `/auth-guard` | `/blog/my-first-post` | `/expo-video` | `/hooks` | `/hooks/contents` | `/hooks/contents/page-1` | `/hooks/contents/page-2` | `/layouts` | `/layouts/nested-layout/with-slug-layout-folder/[layoutSlug]/` | `/loader` | `/loader/other` | `/middleware` | `/not-found/deep/test` | `/not-found/fallback/test` | `/not-found/test` | `/server-data` | `/sheet` | `/spa/spapage` | `/ssr/basic` | `/sub-page` | `/sub-page/sub` | `/sub-page/sub2` | `/web-extensions`
-      DynamicRoutes: `/dynamic-folder-routes/${OneRouter.SingleRoutePart<T>}/${OneRouter.SingleRoutePart<T>}` | `/layouts/nested-layout/with-slug-layout-folder/${OneRouter.SingleRoutePart<T>}` | `/not-found/+not-found` | `/not-found/deep/+not-found` | `/routes/subpath/${string}` | `/segments-stable-ids/${string}` | `/spa/${OneRouter.SingleRoutePart<T>}` | `/ssr/${OneRouter.SingleRoutePart<T>}` | `/ssr/${string}`
-      DynamicRouteTemplate: `/dynamic-folder-routes/[serverId]/[channelId]` | `/layouts/nested-layout/with-slug-layout-folder/[layoutSlug]` | `/not-found/+not-found` | `/not-found/deep/+not-found` | `/routes/subpath/[...subpath]` | `/segments-stable-ids/[...segments]` | `/spa/[spaparams]` | `/ssr/[...rest]` | `/ssr/[param]`
+      DynamicRoutes: `/dynamic-folder-routes/${OneRouter.SingleRoutePart<T>}/${OneRouter.SingleRoutePart<T>}` | `/hooks/contents/with-nested-slug/${OneRouter.SingleRoutePart<T>}` | `/hooks/contents/with-nested-slug/${OneRouter.SingleRoutePart<T>}/${OneRouter.SingleRoutePart<T>}` | `/hooks/contents/with-slug/${OneRouter.SingleRoutePart<T>}` | `/layouts/nested-layout/with-slug-layout-folder/${OneRouter.SingleRoutePart<T>}` | `/not-found/+not-found` | `/not-found/deep/+not-found` | `/routes/subpath/${string}` | `/segments-stable-ids/${string}` | `/spa/${OneRouter.SingleRoutePart<T>}` | `/ssr/${OneRouter.SingleRoutePart<T>}` | `/ssr/${string}`
+      DynamicRouteTemplate: `/dynamic-folder-routes/[serverId]/[channelId]` | `/hooks/contents/with-nested-slug/[folderSlug]` | `/hooks/contents/with-nested-slug/[folderSlug]/[fileSlug]` | `/hooks/contents/with-slug/[slug]` | `/layouts/nested-layout/with-slug-layout-folder/[layoutSlug]` | `/not-found/+not-found` | `/not-found/deep/+not-found` | `/routes/subpath/[...subpath]` | `/segments-stable-ids/[...segments]` | `/spa/[spaparams]` | `/ssr/[...rest]` | `/ssr/[param]`
       IsTyped: true
     }
   }

tests/test/tests/hooks.test.ts

@@ -58,3 +58,34 @@ test('hooks', async () => {
 
   await page.close()
 })
+
+test('useParams in _layout', async () => {
+  const page = await context.newPage()
+  await page.goto(serverUrl + '/hooks')
+
+  const link1 = await page.$('a[href="/hooks/contents/with-slug/slug-page-foo"]')
+  await link1?.click({
+    force: true,
+  })
+  await page.waitForURL('**/hooks/contents/with-slug/slug-page-foo', { timeout: 5_000 })
+  const pageUseParamsJsonString1 = (await page.getByTestId('page-useParams').textContent()) || '{}'
+  const pageUseParamsJson1 = JSON.parse(pageUseParamsJsonString1)
+  expect(pageUseParamsJson1.slug).toBe('slug-page-foo')
+  const layoutUseParamsJsonString1 =
+    (await page.getByTestId('layout-useParams').textContent()) || '{}'
+  const layoutUseParamsJson1 = JSON.parse(layoutUseParamsJsonString1)
+  expect(layoutUseParamsJson1.slug).toBe('slug-page-foo')
+
+  const link2 = await page.$('a[href="/hooks/contents/with-slug/slug-page-bar"]')
+  await link2?.click({
+    force: true,
+  })
+  await page.waitForURL('**/hooks/contents/with-slug/slug-page-bar', { timeout: 5_000 })
+  const pageUseParamsJsonString2 = (await page.getByTestId('page-useParams').textContent()) || '{}'
+  const pageUseParamsJson2 = JSON.parse(pageUseParamsJsonString2)
+  expect(pageUseParamsJson2.slug).toBe('slug-page-bar')
+  const layoutUseParamsJsonString2 =
+    (await page.getByTestId('layout-useParams').textContent()) || '{}'
+  const layoutUseParamsJson2 = JSON.parse(layoutUseParamsJsonString2)
+  expect(layoutUseParamsJson2.slug).toBe('slug-page-bar')
+})