Fix url query param encoding (#9844)

redwoodjs · Jan 17, 2024 · 5fba571 · 5fba571
1 parent c9426e3
commit 5fba571
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/__fixtures__/test-project/web/package.json b/__fixtures__/test-project/web/package.json
@@ -23,7 +23,7 @@
     "@redwoodjs/vite": "6.0.7",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.17",
     "postcss": "^8.4.33",
     "postcss-loader": "^8.0.0",
     "prettier-plugin-tailwindcss": "0.4.1",

diff --git a/packages/router/src/__tests__/util.test.ts b/packages/router/src/__tests__/util.test.ts
@@ -427,4 +427,26 @@ describe('replaceParams', () => {
       '/a/1/c/2/e'
     )
   })
+
+  // See link below for the rules
+  // https://blog.lunatech.com/posts/2009-02-03-what-every-web-developer-must-know-about-url-encoding
+  it('properly encodes search parameters', () => {
+    expect(replaceParams('/search', { q: 'foo bar' })).toEqual(
+      '/search?q=foo+bar'
+    )
+
+    expect(replaceParams('/index-value', { 's&p500': '2024-01-17' })).toEqual(
+      '/index-value?s%26p500=2024-01-17'
+    )
+
+    expect(replaceParams('/search', { q: 'home & garden' })).toEqual(
+      '/search?q=home+%26+garden'
+    )
+
+    expect(replaceParams('/dir', { path: '/Users/rob/Photos' })).toEqual(
+      '/dir?path=%2FUsers%2Frob%2FPhotos'
+    )
+
+    expect(replaceParams('/calc', { expr: '1+2' })).toEqual('/calc?expr=1%2B2')
+  })
 })
diff --git a/packages/router/src/util.ts b/packages/router/src/util.ts
@@ -341,8 +341,11 @@ export function replaceParams(
   })
 
   // Append any unnamed params as search params.
-  if (queryParams.length) {
-    path += `?${queryParams.join('&')}`
+  if (extraArgKeys.length) {
+    const extraArgs = Object.fromEntries(
+      extraArgKeys.map((key) => [key, `${args[key]}`])
+    )
+    path += `?${new URLSearchParams(extraArgs).toString()}`
   }
 
   return path