fix: Handle inlined search params and hashes correctly in <Link /> …

…from `createNavigation` (#1448) Fixes #1438 Fixes #1439
amannn · Oct 22, 2024 · ba0a537 · ba0a537
1 parent 5a8c1ae
commit ba0a537
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/packages/next-intl/.size-limit.ts b/packages/next-intl/.size-limit.ts
@@ -15,13 +15,13 @@ const config: SizeLimitConfig = [
     name: "import {createSharedPathnamesNavigation} from 'next-intl/navigation' (react-client)",
     path: 'dist/production/navigation.react-client.js',
     import: '{createSharedPathnamesNavigation}',
-    limit: '4.035 KB'
+    limit: '4.04 KB'
   },
   {
     name: "import {createLocalizedPathnamesNavigation} from 'next-intl/navigation' (react-client)",
     path: 'dist/production/navigation.react-client.js',
     import: '{createLocalizedPathnamesNavigation}',
-    limit: '4.035 KB'
+    limit: '4.04 KB'
   },
   {
     name: "import {createNavigation} from 'next-intl/navigation' (react-client)",
@@ -33,7 +33,7 @@ const config: SizeLimitConfig = [
     name: "import {createSharedPathnamesNavigation} from 'next-intl/navigation' (react-server)",
     path: 'dist/production/navigation.react-server.js',
     import: '{createSharedPathnamesNavigation}',
-    limit: '16.755 KB'
+    limit: '16.765 KB'
   },
   {
     name: "import {createLocalizedPathnamesNavigation} from 'next-intl/navigation' (react-server)",

diff --git a/packages/next-intl/src/navigation/createNavigation.test.tsx b/packages/next-intl/src/navigation/createNavigation.test.tsx
@@ -128,6 +128,13 @@ describe.each([
         expect(markup).toContain('href="/en/about?foo=bar"');
       });
 
+      it('accepts search params and hashes as part of the pathname', () => {
+        const markup = renderToString(
+          <Link href="/about?foo=bar#top">About</Link>
+        );
+        expect(markup).toContain('href="/en/about?foo=bar#top"');
+      });
+
       it('renders a prefix for a different locale', () => {
         // Being able to accept a string and not only a strictly typed locale is
         // important in order to be able to use a result from `useLocale()`.

diff --git a/packages/next-intl/src/navigation/shared/createSharedNavigationFns.tsx b/packages/next-intl/src/navigation/shared/createSharedNavigationFns.tsx
@@ -132,11 +132,12 @@ export default function createSharedNavigationFns<
         ref={ref}
         // @ts-expect-error -- Available after the validation
         defaultLocale={config.defaultLocale}
-        href={{
-          ...(typeof href === 'object' && href),
-          // @ts-expect-error -- This is ok
-          pathname: finalPathname
-        }}
+        // @ts-expect-error -- This is ok
+        href={
+          typeof href === 'object'
+            ? {...href, pathname: finalPathname}
+            : finalPathname
+        }
         locale={locale}
         localeCookie={config.localeCookie}
         // Provide the minimal relevant information to the client side in order