diff --git a/lib/core/src/client/preview/parseArgsParam.ts b/lib/core/src/client/preview/parseArgsParam.ts
index f7c14939fa7..ac74e97a8b8 100644
--- a/lib/core/src/client/preview/parseArgsParam.ts
+++ b/lib/core/src/client/preview/parseArgsParam.ts
@@ -3,7 +3,10 @@ import { Args } from '@storybook/addons';
 
 const JS_IDENTIFIER_REGEXP = /^[A-Z_$][0-9A-Z_$]*$/i;
 const EXTENDED_ALPHANUM_REGEXP = /^[0-9A-Z _-]*$/i;
-const QS_OPTIONS = { allowDots: true, delimiter: ';' };
+const QS_OPTIONS = {
+  delimiter: ';', // we're parsing a single query param
+  allowDots: true, // objects are encoded using dot notation
+};
 
 // Keep this in sync with validateArgs in @storybook/router
 const validateArgs = (key: any, value: any): boolean => {
diff --git a/lib/router/src/utils.ts b/lib/router/src/utils.ts
index fc6ce63976b..eb0a84b6604 100644
--- a/lib/router/src/utils.ts
+++ b/lib/router/src/utils.ts
@@ -37,7 +37,13 @@ interface Args {
 
 const JS_IDENTIFIER_REGEXP = /^[A-Z_$][0-9A-Z_$]*$/i;
 const EXTENDED_ALPHANUM_REGEXP = /^[0-9A-Z _-]*$/i;
-const QS_OPTIONS = { allowDots: true, delimiter: ';', encode: false, arrayFormat: 'brackets' };
+const QS_OPTIONS = {
+  encode: false, // we handle URL encoding ourselves
+  delimiter: ';', // we don't actually create multiple query params
+  allowDots: true, // encode objects using dot notation: obj.key=val
+  arrayFormat: 'brackets', // encode arrays using brackets without indices: arr[]=one&arr[]=two
+  format: 'RFC1738', // encode spaces using the + sign
+};
 
 // Keep this in sync with validateArgs in @storybook/core
 const validateArgs = (key: any, value: any): boolean => {