Fix url query param encoding (#9844)

Author: Tobbe

__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",

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')
+  })
 })

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