diff --git a/packages/next/client/dev/on-demand-entries-utils.js b/packages/next/client/dev/on-demand-entries-utils.js
index 43fc5858a6f3469..5a0aca21ff90fac 100644
--- a/packages/next/client/dev/on-demand-entries-utils.js
+++ b/packages/next/client/dev/on-demand-entries-utils.js
@@ -19,7 +19,9 @@ export function setupPing(assetPrefix, pathnameFn, retry) {
   closePing()
 
   evtSource = getEventSourceWrapper({
-    path: `${assetPrefix}/_next/webpack-hmr?page=${currentPage}`,
+    path: `${assetPrefix}/_next/webpack-hmr?page=${encodeURIComponent(
+      currentPage
+    )}`,
     timeout: 5000,
   })
 
diff --git a/test/integration/development-hmr-refresh/pages/with+Special&Chars=.js b/test/integration/development-hmr-refresh/pages/with+Special&Chars=.js
new file mode 100644
index 000000000000000..dec913d8f942ab0
--- /dev/null
+++ b/test/integration/development-hmr-refresh/pages/with+Special&Chars=.js
@@ -0,0 +1,9 @@
+export default function Page() {
+  return (
+    <>
+      if this page reloads during development mode, then the browser did not
+      connect to the on demand entries handler. see on-demand-entry-handler.ts
+      and on-demand-entries-utils.js
+    </>
+  )
+}
diff --git a/test/integration/development-hmr-refresh/test/index.test.js b/test/integration/development-hmr-refresh/test/index.test.js
new file mode 100644
index 000000000000000..fe030101d6f5d01
--- /dev/null
+++ b/test/integration/development-hmr-refresh/test/index.test.js
@@ -0,0 +1,30 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import webdriver from 'next-webdriver'
+import { findPort, launchApp, killApp, waitFor } from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '../')
+
+let app
+let appPort
+
+beforeAll(async () => {
+  appPort = await findPort()
+  app = await launchApp(appDir, appPort)
+})
+
+// see issue #22099
+it('page should not reload when the file is not changed', async () => {
+  const browser = await webdriver(appPort, '/with+Special&Chars=')
+
+  browser.eval(`window.doesNotReloadCheck = true`)
+
+  await waitFor(10000)
+
+  expect(await browser.eval('window.doesNotReloadCheck')).toBe(true)
+})
+
+afterAll(() => killApp(app))