diff --git a/__fixtures__/test-project/web/package.json b/__fixtures__/test-project/web/package.json index 865b3956d038..86f8113bf78a 100644 --- 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 index 0d0841ae87d4..27c8cb2617fe 100644 --- 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 index 27b358c9ecd6..8aa198e8b59b 100644 --- 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