Encode query params

README.md

@@ -167,7 +167,7 @@ Let's share some extra detail about these router config properties:
 - `routes`: mandatory array of objects declaring route entries; detailed in the [routes configuration paragraph](#routes-configuration)
 - `awaitComponent`: a boolean with default value `false`. When set to true it will tell the router to keep rendering the current route and hold new route rendering until code preloading for the latest is complete; more info on the [Suspense boundaries alternative paragraph](#suspense-boundaries-alternative)
 - `assistPrefetch`: a boolean with default value `false`. When set to true it will let the router transform prefetch requests into "Suspendable" resources; more info on the [data prefetching paragraph](#data-prefetching)
-- `awaitPrefetch`: a boolean with default value `false`. When set to true it will tell the router to keep rendering the urrent route and hold new route rendering until data prefetch for the latest is complete; more info on the [Suspense boundaries alternative paragraph](#suspense-boundaries-alternative)
+- `awaitPrefetch`: a boolean with default value `false`. When set to true it will tell the router to keep rendering the current route and hold new route rendering until data prefetch for the latest is complete; more info on the [Suspense boundaries alternative paragraph](#suspense-boundaries-alternative)
 - `window`: this is the only property accepted for both, the Browser and Hash router. `window` defaults to the [defaultView of the current document](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView). However, you might want to customise this when using the router on a window that doesn't correspond to the one of the main document; an iFrame is probably the perfect example
 - `initialEntries`: available only on Memory Router; defaults to `['/']`. This is an array of locations in the history stack, similar to what you would have when you've been navigating through a few pages in your application. The values in the array could be a plain string path or a [location object](https://developer.mozilla.org/en-US/docs/Web/API/Location)
 - `initialIndex`: available only on Memory Router; defaults to the index of the last item in `initialEntries`. The value must be a number that represents the index of the location you want to set as current in the history stack. Normally when navigating through pages in your application you add entries on the history stack and the last entry is always the only currently active; hence the default value. However, when navigating backward or forward you keep the entries in the stack but change the index; this property can help simulate this behaviour
@@ -335,7 +335,7 @@ const routes = [ /* routes objects as per example above */ ]
 const router = createBrowserRouter({
   routes,
   assistPrefetch: true, // you want the router to integrate data prefetch requests with React Suspense
-  awaitPrefetch: false // Suspense alternaive to hold new route rendering until data prefetch is completed
+  awaitPrefetch: false // Suspense alternative to hold new route rendering until data prefetch is completed
 })
 
 export default router

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-concurrent-router",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Performant routing embracing React concurrent UI patterns",
   "author": "Santino Puleio",
   "license": "MIT",
@@ -95,44 +95,44 @@
   },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "^0.27.0",
-    "@babel/core": "^7.20.12",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-transform-object-assign": "^7.18.6",
-    "@babel/plugin-transform-react-constant-elements": "^7.20.2",
-    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/plugin-transform-react-constant-elements": "^7.21.3",
+    "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@babel/runtime": "^7.20.7",
+    "@babel/runtime": "^7.21.0",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@testing-library/dom": "^8.19.1",
+    "@testing-library/dom": "^9.0.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/react": "^18.0.26",
-    "babel-jest": "^29.3.1",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.0.28",
+    "babel-jest": "^29.5.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "bundlewatch": "^0.3.3",
     "cherry-pick": "^0.5.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
     "doctoc": "^2.2.1",
     "dtslint": "^4.2.1",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "lint-staged": "^13.1.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "lint-staged": "^13.2.0",
     "open-cli": "^7.1.0",
     "prettier-standard": "^16.4.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.4.0",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
     "standard": "^17.0.0",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "@babel/runtime": "^7.11.0",

src/__tests__/useSearchParams.js

@@ -3,7 +3,7 @@
  */
 import '@testing-library/jest-dom/extend-expect'
 import React, { useContext } from 'react'
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
 
 import useSearchParams from '../useSearchParams'
 
@@ -45,7 +45,7 @@ const ExampleComponent = () => {
         onClick={() =>
           setSearchParams(currentParams => ({
             ...currentParams,
-            quux: 'corge'
+            'quux/': 'corge='
           }))
         }
       >
@@ -121,7 +121,7 @@ describe('useSearchParams', () => {
     expect(mockHistoryPush).toHaveBeenCalledWith(
       {
         pathname: '/home',
-        search: '?baz=qux&foo=bar&quux=corge'
+        search: '?baz=qux&foo=bar&quux%2F=corge%3D'
       },
       {}
     )

src/__tests__/utils.test.js

@@ -39,8 +39,12 @@ describe('utils', () => {
   describe('sortAndStringifyRequestParams', () => {
     it('returns expected value on simple object', () => {
       expect(
-        sortAndStringifyRequestParams({ foo: 'bar', qux: 'quux', baz: 'qux' })
-      ).toBe('?baz=qux&foo=bar&qux=quux')
+        sortAndStringifyRequestParams({
+          foo: 'bar',
+          qux: 'quux',
+          'baz/': 'qux='
+        })
+      ).toBe('?baz%2F=qux%3D&foo=bar&qux=quux')
     })
 
     it('returns expected value on simple object with array values', () => {

src/utils.js

@@ -42,16 +42,16 @@ export const sortAndStringifyRequestParams = params => {
     )
     .reduce((identifier, element) => {
       const rawParamValue = params[element.value]
+      const paramName = encodeURIComponent(element.value)
       const paramValue = Array.isArray(rawParamValue)
-        ? rawParamValue.reduce(
-            (params, value, index) =>
-              params.concat(index >= 1 ? `&${element.value}=${value}` : value),
-            ''
-          )
-        : rawParamValue
-      return `${identifier}${!identifier ? '?' : '&'}${
-        element.value
-      }=${paramValue}`
+        ? rawParamValue.reduce((params, value, index) => {
+            const encodedValue = encodeURIComponent(value)
+            return params.concat(
+              index >= 1 ? `&${paramName}=${encodedValue}` : encodedValue
+            )
+          }, '')
+        : encodeURIComponent(rawParamValue)
+      return `${identifier}${!identifier ? '?' : '&'}${paramName}=${paramValue}`
     }, '')
 }