fix(router): stop K8s navigations dropping the page reset and page size

fix(router): stop navigations dropping queued nuqs writes
fix(router): remount the page when the route entry changes
2026-11-01 05:50:42 +00:00 · 2026-10-30 15:47:19 -03:00 · 2026-10-30 15:29:54 -03:00 · 2026-10-30 14:46:59 -03:00 · 2026-10-30 14:46:58 -03:00 · 2026-10-30 14:46:58 -03:00
59 changed files with 1155 additions and 720 deletions
--- a/frontend/.oxlintrc.json
+++ b/frontend/.oxlintrc.json
@@ -593,12 +593,13 @@
      }
    },
    {
-      // The react-router allowlist: the facade itself, the route table, `useSafeNavigate`,
-      // the history singleton and the test and story router mounts. Test files are
+      // The react-router allowlist: the facade itself, the route table, the router mount,
+      // `useSafeNavigate`, the history singleton and the test and story router mounts. Test files are
      // deliberately absent: they render at a route or use tests/router-mocks.
      "files": [
        "src/lib/router/**",
        "src/AppRoutes/**",
+        "src/app/AppRouter.tsx",
        "src/hooks/useSafeNavigate.ts",
        "src/lib/history.ts",
        "src/tests/router.tsx",
--- a/frontend/jest.setup.ts
+++ b/frontend/jest.setup.ts
@@ -5,6 +5,8 @@
 /**
 * Adds custom matchers from the react testing library to all tests
 */
+import { TextDecoder, TextEncoder } from 'node:util';
+
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import 'jest-styled-components';
@@ -14,6 +16,14 @@ import { server } from './src/mocks-server/server';
 import './src/styles.scss';
 // Establish API mocking before all tests.

+// react-router@7's entry point pulls in its server-runtime cookie signing,
+// which builds a TextEncoder at module scope. jsdom ships neither encoder, so
+// importing anything from the router throws before a test starts.
+Object.assign(globalThis, {
+	TextEncoder: globalThis.TextEncoder ?? TextEncoder,
+	TextDecoder: globalThis.TextDecoder ?? TextDecoder,
+});
+
 // Mock window.matchMedia
 window.matchMedia =
 	window.matchMedia ||
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -83,7 +83,7 @@
    "dompurify": "3.4.15",
    "event-source-polyfill": "1.0.31",
    "eventemitter3": "5.0.1",
-    "history": "4.10.1",
+    "history": "5.3.0",
    "html-to-image": "1.11.13",
    "http-status-codes": "2.3.0",
    "i18next": "^21.6.12",
@@ -117,8 +117,7 @@
    "react-query": "3.39.3",
    "react-redux": "^7.2.2",
    "react-rnd": "^10.5.3",
-    "react-router-dom": "^5.2.0",
-    "react-router-dom-v5-compat": "6.30.6",
+    "react-router": "7.18.4",
    "react-syntax-highlighter": "15.5.0",
    "react-use": "^17.3.2",
    "react-virtuoso": "4.0.3",
@@ -172,7 +171,6 @@
    "@types/crypto-js": "4.2.2",
    "@types/d3-hierarchy": "1.1.11",
    "@types/event-source-polyfill": "^1.0.0",
-    "@types/history": "4.7.11",
    "@types/jest": "30.0.0",
    "@types/lodash-es": "^4.17.4",
    "@types/node": "^22.20.5",
@@ -183,7 +181,6 @@
    "@types/react-grid-layout": "^1.1.2",
    "@types/react-redux": "^7.1.11",
    "@types/react-resizable": "3.0.3",
-    "@types/react-router-dom": "^5.1.6",
    "@types/react-syntax-highlighter": "15.5.13",
    "@types/redux-mock-store": "1.0.4",
    "@types/styled-components": "^5.1.4",
--- a/frontend/plugins/tests/no-direct-react-router-import.test.mjs
+++ b/frontend/plugins/tests/no-direct-react-router-import.test.mjs
@@ -54,8 +54,8 @@ await ruleTester({
 			errors: [{ message: MOCK }],
 		},
 		{
-			name: 'jest.doMock of react-router-dom-v5-compat',
-			code: "jest.doMock('react-router-dom-v5-compat');",
+			name: 'jest.doMock of react-router',
+			code: "jest.doMock('react-router');",
 			errors: [{ message: MOCK }],
 		},
 		{
@@ -74,9 +74,9 @@ await ruleTester({
 			errors: [{ message: FACADE }],
 		},
 		{
-			name: 'react-router-dom-v5-compat',
-			code: "import { useNavigate } from 'react-router-dom-v5-compat';",
-			errors: [{ message: 'compat package is an implementation detail' }],
+			name: 'react-router-dom is flagged as the v7 re-export shim',
+			code: "import { Outlet } from 'react-router-dom';",
+			errors: [{ message: 'only a re-export shim' }],
 		},
 		{
 			name: 'lib/history default import',
--- a/frontend/plugins/rules/no-direct-react-router-import.mjs
+++ b/frontend/plugins/rules/no-direct-react-router-import.mjs
@@ -5,12 +5,15 @@
 * upgrade is a change to one directory instead of ~300 call sites. This rule
 * keeps new call sites, and test mocks, from reaching past it.
 *
+ * `react-router-dom` is still flagged even though the package is gone: on v7 it is a
+ * re-export shim over `react-router`, so reinstalling it would split the tree again.
+ *
 * `history` (the package) is deliberately not flagged: it is a transitive concern of
 * the version bump, not something the facade replaces.
 *
- * The allowlist (the facade itself, the route table, `useSafeNavigate`, the history
- * singleton and the test and story router mounts) is applied via overrides in
- * .oxlintrc.json, not here, so the file list stays visible next to the severity.
+ * The allowlist (the facade itself, the route table, the router mount, `useSafeNavigate`,
+ * the history singleton and the test and story router mounts) is applied via overrides
+ * in .oxlintrc.json, not here, so the file list stays visible next to the severity.
 */

 import path from 'node:path';
@@ -29,9 +32,8 @@ const JEST_MODULE_METHODS = new Set([
 ]);

 const MESSAGE_IDS = {
-	'react-router': 'v5Router',
-	'react-router-dom': 'v5Router',
-	'react-router-dom-v5-compat': 'v6Compat',
+	'react-router': 'router',
+	'react-router-dom': 'routerDom',
 	'lib/history': 'historySingleton',
 	'@/lib/history': 'historySingleton',
 };
@@ -65,10 +67,10 @@ export default {
 		},
 		schema: [],
 		messages: {
-			v5Router:
-				'Do not import react-router-dom directly. Use the src/lib/router facade (useAppNavigate, useAppLocation, useAppParams, AppLink, Redirect, matchRoute) so a router upgrade stays contained.',
-			v6Compat:
-				'Do not import react-router-dom-v5-compat directly. Use the src/lib/router facade instead; the compat package is an implementation detail of the migration and disappears with it.',
+			router:
+				'Do not import react-router directly. Use the src/lib/router facade (useAppNavigate, useAppLocation, useAppParams, AppLink, Redirect, matchRoute) so a router upgrade stays contained.',
+			routerDom:
+				'Do not import react-router-dom. The app is on react-router; on v7 react-router-dom is only a re-export shim, and installing it puts two copies of the router in the tree. Use the src/lib/router facade.',
 			historySingleton:
 				'Do not import the lib/history singleton. Use the helpers in src/lib/router/navigation.ts, or useAppNavigate() to follow the nearest router. history loses basename handling once the router owns it.',
 			mock:
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -24,7 +24,6 @@ overrides:
  nanoid@<3.3.18: '>=3.3.18 <4'
  prismjs@<1.30.0: '>=1.30.0 <2'
  postcss-selector-parser@>=7.1.0 <7.1.3: '>=7.1.3 <8'
-  react-router@>=6.7.0 <6.30.6: '>=6.30.6 <7'
  tmp@<0.2.6: '>=0.2.6 <0.3.0'
  yaml@>=1.0.0 <1.10.3: '>=1.10.3 <2'
  '@types/node': ^22.20.5
@@ -83,7 +82,7 @@ importers:
        version: 0.4.0
      '@signozhq/ui':
        specifier: 0.2.0
-        version: 0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
+        version: 0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@7.18.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
      '@tanstack/react-table':
        specifier: 8.21.3
        version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -166,8 +165,8 @@ importers:
        specifier: 5.0.1
        version: 5.0.1
      history:
-        specifier: 4.10.1
-        version: 4.10.1
+        specifier: 5.3.0
+        version: 5.3.0
      html-to-image:
        specifier: 1.11.13
        version: 1.11.13
@@ -203,7 +202,7 @@ importers:
        version: 12.4.13(@emotion/is-prop-valid@1.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      nuqs:
        specifier: 2.8.8
-        version: 2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
+        version: 2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@7.18.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
      overlayscrollbars:
        specifier: ^2.16.0
        version: 2.16.0
@@ -267,12 +266,9 @@ importers:
      react-rnd:
        specifier: ^10.5.3
        version: 10.5.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react-router-dom:
-        specifier: ^5.2.0
-        version: 5.3.4(react@18.2.0)
-      react-router-dom-v5-compat:
-        specifier: 6.30.6
-        version: 6.30.6(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0)
+      react-router:
+        specifier: 7.18.4
+        version: 7.18.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      react-syntax-highlighter:
        specifier: 15.5.0
        version: 15.5.0(react@18.2.0)
@@ -391,9 +387,6 @@ importers:
      '@types/event-source-polyfill':
        specifier: ^1.0.0
        version: 1.0.1
-      '@types/history':
-        specifier: 4.7.11
-        version: 4.7.11
      '@types/jest':
        specifier: 30.0.0
        version: 30.0.0
@@ -424,9 +417,6 @@ importers:
      '@types/react-resizable':
        specifier: 3.0.3
        version: 3.0.3
-      '@types/react-router-dom':
-        specifier: ^5.1.6
-        version: 5.3.3
      '@types/react-syntax-highlighter':
        specifier: 15.5.13
        version: 15.5.13
@@ -3328,10 +3318,6 @@ packages:
  '@react-dnd/shallowequal@4.0.2':
    resolution: {integrity: sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==}

-  '@remix-run/router@1.23.4':
-    resolution: {integrity: sha512-q7j5geK7xs3UJSdm9/iytUNclBnLmYx1EnSeCFXHPeutdqgIMeFeHtUZgS3EhlKxdBEAu8OwtJCwmLrEzpSs7Q==}
-    engines: {node: '>=14.0.0'}
-
  '@rolldown/binding-android-arm64@1.0.0-beta.53':
    resolution: {integrity: sha512-Ok9V8o7o6YfSdTTYA/uHH30r3YtOxLD6G3wih/U9DO0ucBBFq8WPt/DslU53OgfteLRHITZny9N/qCUxMf9kjQ==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -4013,9 +3999,6 @@ packages:
  '@types/hast@3.0.4':
    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}

-  '@types/history@4.7.11':
-    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
-
  '@types/hoist-non-react-statics@3.3.1':
    resolution: {integrity: sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==}

@@ -4097,12 +4080,6 @@ packages:
  '@types/react-resizable@3.0.3':
    resolution: {integrity: sha512-W/QsUOZoXBAIBQNhNm95A5ohoaiUA874lWQytO2UP9dOjp5JHO9+a0cwYNabea7sA12ZDJnGVUFZxcNaNksAWA==}

-  '@types/react-router-dom@5.3.3':
-    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
-
-  '@types/react-router@5.1.20':
-    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
-
  '@types/react-syntax-highlighter@15.5.13':
    resolution: {integrity: sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==}

@@ -5035,6 +5012,10 @@ packages:
    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
    engines: {node: '>= 0.6'}

+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
  copy-anything@3.0.5:
    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
    engines: {node: '>=12.13'}
@@ -7515,7 +7496,7 @@ packages:
      '@tanstack/react-router': ^1
      next: '>=14.2.0'
      react: '>=18.2.0 || ^19.0.0-0'
-      react-router: '>=6.30.6 <7'
+      react-router: ^5 || ^6 || ^7
      react-router-dom: ^5 || ^6 || ^7
    peerDependenciesMeta:
      '@remix-run/react':
@@ -7536,7 +7517,7 @@ packages:
      '@tanstack/react-router': ^1
      next: '>=14.2.0'
      react: '>=18.2.0 || ^19.0.0-0'
-      react-router: '>=6.30.6 <7'
+      react-router: ^5 || ^6 || ^7 || ^8
      react-router-dom: ^5 || ^6 || ^7
    peerDependenciesMeta:
      '@remix-run/react':
@@ -8460,14 +8441,6 @@ packages:
      react: '>=16.3.0'
      react-dom: '>=16.3.0'

-  react-router-dom-v5-compat@6.30.6:
-    resolution: {integrity: sha512-I54amXpivD3V0r1BYUIj1qLOljXx+UpbLG63Bqbm3BdKH62z4H3znC0L7SyMTYAMEDZuUjDSlqtkBRG/OEDXBg==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      react: '>=16.8'
-      react-dom: '>=16.8'
-      react-router-dom: 4 || 5
-
  react-router-dom@5.3.4:
    resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==}
    peerDependencies:
@@ -8478,11 +8451,15 @@ packages:
    peerDependencies:
      react: '>=15'

-  react-router@6.30.6:
-    resolution: {integrity: sha512-5HfK7k5im7LTOB0EqCQmfvy4C13G92Ssj1VTmouTK3AJvyjKTnFuCV0vcMAD/JS+JC4DvDIBRrlAeJIFjh5VWg==}
-    engines: {node: '>=14.0.0'}
+  react-router@7.18.4:
+    resolution: {integrity: sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==}
+    engines: {node: '>=20.0.0'}
    peerDependencies:
-      react: '>=16.8'
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true

  react-style-singleton@2.2.3:
    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
@@ -12928,8 +12905,6 @@ snapshots:

  '@react-dnd/shallowequal@4.0.2': {}

-  '@remix-run/router@1.23.4': {}
-
  '@rolldown/binding-android-arm64@1.0.0-beta.53':
    optional: true

@@ -13162,7 +13137,7 @@ snapshots:

  '@signozhq/icons@0.4.0': {}

-  '@signozhq/ui@0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.2.0(@date-fns/tz@1.4.1)(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@7.18.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)':
    dependencies:
      '@base-ui/react': 1.7.0(@date-fns/tz@1.4.1)(@types/react@18.0.26)(date-fns@4.1.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      '@chenglou/pretext': 0.0.8
@@ -13186,7 +13161,7 @@ snapshots:
      lodash-es: 4.18.1
      motion: 11.18.2(@emotion/is-prop-valid@1.2.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      next-themes: 0.4.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      nuqs: 2.9.6(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0)
+      nuqs: 2.9.6(react-router-dom@5.3.4(react@18.2.0))(react-router@7.18.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
      react: 18.2.0
      react-compiler-runtime: 1.0.0(react@18.2.0)
      react-day-picker: 9.9.0(react@18.2.0)
@@ -13638,8 +13613,6 @@ snapshots:
    dependencies:
      '@types/unist': 3.0.2

-  '@types/history@4.7.11': {}
-
  '@types/hoist-non-react-statics@3.3.1':
    dependencies:
      '@types/react': 18.0.26
@@ -13736,17 +13709,6 @@ snapshots:
    dependencies:
      '@types/react': 18.0.26

-  '@types/react-router-dom@5.3.3':
-    dependencies:
-      '@types/history': 4.7.11
-      '@types/react': 18.0.26
-      '@types/react-router': 5.1.20
-
-  '@types/react-router@5.1.20':
-    dependencies:
-      '@types/history': 4.7.11
-      '@types/react': 18.0.26
-
  '@types/react-syntax-highlighter@15.5.13':
    dependencies:
      '@types/react': 18.0.26
@@ -14788,6 +14750,8 @@ snapshots:

  cookie@0.7.2: {}

+  cookie@1.1.1: {}
+
  copy-anything@3.0.5:
    dependencies:
      is-what: 4.1.16
@@ -16298,7 +16262,8 @@ snapshots:
    dependencies:
      is-inside-container: 1.0.0

-  isarray@0.0.1: {}
+  isarray@0.0.1:
+    optional: true

  isarray@1.0.0: {}

@@ -17793,20 +17758,20 @@ snapshots:
    dependencies:
      boolbase: 1.0.0

-  nuqs@2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0):
+  nuqs@2.8.8(react-router-dom@5.3.4(react@18.2.0))(react-router@7.18.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0):
    dependencies:
      '@standard-schema/spec': 1.0.0
      react: 18.2.0
    optionalDependencies:
-      react-router: 6.30.6(react@18.2.0)
+      react-router: 7.18.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      react-router-dom: 5.3.4(react@18.2.0)

-  nuqs@2.9.6(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.6(react@18.2.0))(react@18.2.0):
+  nuqs@2.9.6(react-router-dom@5.3.4(react@18.2.0))(react-router@7.18.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0):
    dependencies:
      '@standard-schema/spec': 1.1.0
      react: 18.2.0
    optionalDependencies:
-      react-router: 6.30.6(react@18.2.0)
+      react-router: 7.18.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      react-router-dom: 5.3.4(react@18.2.0)

  nwsapi@2.2.23: {}
@@ -18182,6 +18147,7 @@ snapshots:
  path-to-regexp@1.9.0:
    dependencies:
      isarray: 0.0.1
+    optional: true

  path-to-regexp@6.3.0: {}

@@ -18951,18 +18917,9 @@ snapshots:
      react-draggable: 4.5.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
      tslib: 2.6.2

-  react-router-dom-v5-compat@6.30.6(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react@18.2.0):
-    dependencies:
-      '@remix-run/router': 1.23.4
-      history: 5.3.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-router: 6.30.6(react@18.2.0)
-      react-router-dom: 5.3.4(react@18.2.0)
-
  react-router-dom@5.3.4(react@18.2.0):
    dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2
      history: 4.10.1
      loose-envify: 1.4.0
      prop-types: 15.8.1
@@ -18970,10 +18927,11 @@ snapshots:
      react-router: 5.3.4(react@18.2.0)
      tiny-invariant: 1.3.3
      tiny-warning: 1.0.3
+    optional: true

  react-router@5.3.4(react@18.2.0):
    dependencies:
-      '@babel/runtime': 7.28.2
+      '@babel/runtime': 7.29.2
      history: 4.10.1
      hoist-non-react-statics: 3.3.2
      loose-envify: 1.4.0
@@ -18983,11 +18941,15 @@ snapshots:
      react-is: 16.13.1
      tiny-invariant: 1.3.3
      tiny-warning: 1.0.3
+    optional: true

-  react-router@6.30.6(react@18.2.0):
+  react-router@7.18.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
    dependencies:
-      '@remix-run/router': 1.23.4
+      cookie: 1.1.1
      react: 18.2.0
+      set-cookie-parser: 2.6.0
+    optionalDependencies:
+      react-dom: 18.2.0(react@18.2.0)

  react-style-singleton@2.2.3(@types/react@18.0.26)(react@18.2.0):
    dependencies:
--- a/frontend/pnpm-workspace.yaml
+++ b/frontend/pnpm-workspace.yaml
@@ -74,11 +74,6 @@ overrides:
 #      (postcss-selector-parser ^7.0.0)
 # remove: blocked, 4.2.0 is latest and the range is open, so the floor is what pulls the fix
 postcss-selector-parser@>=7.1.0 <7.1.3: '>=7.1.3 <8'
- # via: @signozhq/ui > nuqs@2 (react-router ^6.4.0 || ^7)
- # remove: blocked. GHSA-wrjc-x8rr-h8h6 and the deserializeErrors advisory are patched
- # only in 7.18.0. Do NOT open the cap: react-router >=7 requires React 19 and breaks
- # the app-wide CompatRouter, so those two moderates stay until the app moves to React 19
- react-router@>=6.7.0 <6.30.6: '>=6.30.6 <7'
 # via: msw@1.3.2 (devDep) > inquirer@8 > external-editor@3.1.0 (tmp ^0.0.33)
 # remove: upgrade msw to >=2 (drops the inquirer/external-editor chain)
 tmp@<0.2.6: '>=0.2.6 <0.3.0'
--- a/frontend/src/AppRoutes/Private.tsx
+++ b/frontend/src/AppRoutes/Private.tsx
@@ -1,5 +1,4 @@
 import { ReactChild, useCallback, useMemo } from 'react';
-import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import { useListUsers } from 'api/generated/services/users';
@@ -9,6 +8,9 @@ import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { isEmpty } from 'lodash-es';
+import { matchRoute } from 'lib/router/matchRoute';
+import { Redirect } from 'lib/router/Redirect';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { OrgPreference } from 'types/api/preferences/preference';
@@ -28,7 +30,7 @@ import routes, {

 // eslint-disable-next-line sonarjs/cognitive-complexity
 function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
-	const location = useLocation();
+	const location = useAppLocation();
 	const { pathname } = location;
 	const {
 		org,
@@ -47,10 +49,11 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		() =>
 			new Map(
 				[...routes, LIST_LICENSES, SUPPORT_ROUTE].map((e) => {
-					const currentPath = matchPath(pathname, {
-						path: e.path,
-					});
-					return [currentPath === null ? null : 'current', e];
+					const patterns = Array.isArray(e.path) ? e.path : [e.path];
+					const matches = patterns.some(
+						(pattern) => matchRoute(pathname, pattern) !== null,
+					);
+					return [matches ? 'current' : null, e];
 				}),
 			),
 		[pathname],
@@ -242,7 +245,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 			);
 			if (fromPathname) {
 				setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-				return <Redirect to={fromPathname} />;
+				return <Redirect to={fromPathname} replace={false} />;
 			}
 			if (pathname !== ROUTES.SOMETHING_WENT_WRONG) {
 				return <Redirect to={ROUTES.HOME} />;
@@ -256,7 +259,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		);
 		if (fromPathname) {
 			setLocalStorageApi(LOCALSTORAGE.UNAUTHENTICATED_ROUTE_HIT, '');
-			return <Redirect to={fromPathname} />;
+			return <Redirect to={fromPathname} replace={false} />;
 		}
 		return <Redirect to={ROUTES.HOME} />;
 	} else {
--- a/frontend/src/AppRoutes/tests/Private.test.tsx
+++ b/frontend/src/AppRoutes/tests/Private.test.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter, Route, Switch, useLocation } from 'react-router-dom';
+import { MemoryRouter, Route, Routes, useLocation } from 'react-router';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { ORG_PREFERENCES } from 'constants/orgPreferences';
@@ -237,12 +237,17 @@ function buildPrivateRouteTree(
 			<MemoryRouter initialEntries={[initialRoute]}>
 				<AppContext.Provider value={contextValue}>
 					<PrivateRoute>
-						<Switch>
-							<Route path="*">
-								<div data-testid="children-rendered">Content</div>
-								<LocationDisplay />
-							</Route>
-						</Switch>
+						<Routes>
+							<Route
+								path="*"
+								element={
+									<>
+										<div data-testid="children-rendered">Content</div>
+										<LocationDisplay />
+									</>
+								}
+							/>
+						</Routes>
 					</PrivateRoute>
 				</AppContext.Provider>
 			</MemoryRouter>
--- a/frontend/src/AppRoutes/tests/routeElements.test.tsx
+++ b/frontend/src/AppRoutes/tests/routeElements.test.tsx
@@ -0,0 +1,73 @@
+import { lazy, Suspense, useState } from 'react';
+import { Routes } from 'react-router';
+import { act, render, screen } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { navigate } from 'lib/router/navigation';
+import { TestRouter } from 'tests/router';
+import { resetTestRoute } from 'tests/router-utils';
+
+import { routeElements } from '../routeElements';
+import type { AppRoutes } from '../routes';
+
+let mounts = 0;
+
+function Page(): JSX.Element {
+	const [mount] = useState(() => {
+		mounts += 1;
+		return mounts;
+	});
+	return <div data-testid="page">mount {mount}</div>;
+}
+
+// Two lazy wrappers of one module, like the logs explorer and pipelines routes.
+const Explorer = lazy(async () => ({ default: Page }));
+const Pipelines = lazy(async () => ({ default: Page }));
+
+const routes: AppRoutes[] = [
+	{ path: ROUTES.LOGS, component: Explorer, key: 'LOGS', isPrivate: true },
+	{
+		path: [ROUTES.LOGS_PIPELINES, ROUTES.LOGS_INDEX_FIELDS],
+		component: Pipelines,
+		key: 'LOGS_PIPELINES',
+		isPrivate: true,
+	},
+];
+
+function renderRoutes(): void {
+	render(
+		<TestRouter initialRoute={ROUTES.LOGS}>
+			<Suspense fallback={<div data-testid="fallback" />}>
+				<Routes>{routeElements(routes)}</Routes>
+			</Suspense>
+		</TestRouter>,
+	);
+}
+
+describe('routeElements', () => {
+	beforeEach(() => {
+		mounts = 0;
+	});
+
+	afterEach(() => {
+		resetTestRoute();
+	});
+
+	it('remounts the page when another route entry resolves to the same component', async () => {
+		renderRoutes();
+		await expect(screen.findByText('mount 1')).resolves.toBeInTheDocument();
+
+		act(() => navigate(ROUTES.LOGS_PIPELINES));
+
+		await expect(screen.findByText('mount 2')).resolves.toBeInTheDocument();
+	});
+
+	it('keeps the page mounted across the patterns of one route entry', async () => {
+		renderRoutes();
+		act(() => navigate(ROUTES.LOGS_PIPELINES));
+		await expect(screen.findByText('mount 2')).resolves.toBeInTheDocument();
+
+		act(() => navigate(ROUTES.LOGS_INDEX_FIELDS));
+
+		expect(screen.getByTestId('page')).toHaveTextContent('mount 2');
+	});
+});
--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@@ -1,6 +1,5 @@
 import { ReactNode, Suspense, useCallback, useEffect, useState } from 'react';
-import { Route, Router, Switch } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
+import { Route, Routes } from 'react-router';
 import * as Sentry from '@sentry/react';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -23,7 +22,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
 import { IS_PROD } from 'lib/env';
-import history from 'lib/history';
+import { getCurrentLocation, navigate, subscribe } from 'lib/router/navigation';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import posthog from 'posthog-js';
 import { useAppContext } from 'providers/App/App';
@@ -33,6 +32,7 @@ import { extractDomain } from 'utils/app';

 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
+import { routeElements } from './routeElements';
 import defaultRoutes, {
 	AppRoutes,
 	LIST_LICENSES,
@@ -44,12 +44,6 @@ import {
 	SENTRY_IGNORE_ERRORS,
 } from './sentryFilters';

-const appRouter = (children: ReactNode): ReactNode => (
-	<Router history={history}>
-		<CompatRouter>{children}</CompatRouter>
-	</Router>
-);
-
 const appLayout = (children: ReactNode): ReactNode => (
 	<AppLayout>{children}</AppLayout>
 );
@@ -74,14 +68,16 @@ function App(): JSX.Element {
 	const chatSupport = useChatSupport();

 	const { hostname } = window.location;
-	const [pathname, setPathname] = useState(history.location.pathname);
+	// Through the facade, not the raw history: the router owns the base path
+	// now, so `history.location.pathname` would still carry it.
+	const [pathname, setPathname] = useState(getCurrentLocation().pathname);

 	const { isCloudUser, isEnterpriseSelfHostedUser } = useGetTenantLicense();

 	const [isSentryInitialized, setIsSentryInitialized] = useState(false);

 	useEffect(() => {
-		return history.listen((location) => {
+		return subscribe(({ location }) => {
 			setPathname(location.pathname);
 		});
 	}, []);
@@ -398,7 +394,7 @@ function App(): JSX.Element {
 		// this needs to be on top of data missing error because if there is an error, data will never be loaded and it will
 		// move to indefinitive loading
 		if (userFetchError && pathname !== ROUTES.SOMETHING_WENT_WRONG) {
-			history.replace(ROUTES.SOMETHING_WENT_WRONG);
+			navigate(ROUTES.SOMETHING_WENT_WRONG, { replace: true });
 		}

 		// if all of the data is not set then return a spinner, this is required because there is some gap between loading states and data setting
@@ -414,7 +410,6 @@ function App(): JSX.Element {
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<AppShell
-				router={appRouter}
 				overlays={
 					isLoggedInState && (
 						<>
@@ -427,18 +422,11 @@ function App(): JSX.Element {
 				<PrivateRoute>
 					<AppPageProviders layout={appLayout}>
 						<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-							<Switch>
-								{routes.map(({ path, component, exact }) => (
-									<Route
-										key={`${path}`}
-										exact={exact}
-										path={path}
-										component={component}
-									/>
-								))}
-								<Route exact path="/" component={Home} />
-								<Route path="*" component={NotFound} />
-							</Switch>
+							<Routes>
+								{routeElements(routes)}
+								<Route path="/" element={<Home />} />
+								<Route path="*" element={<NotFound />} />
+							</Routes>
 						</Suspense>
 					</AppPageProviders>
 				</PrivateRoute>
--- a/frontend/src/AppRoutes/routeElements.tsx
+++ b/frontend/src/AppRoutes/routeElements.tsx
@@ -0,0 +1,20 @@
+import { Route } from 'react-router';
+
+import type { AppRoutes } from './routes';
+
+/**
+ * The page is keyed by its route entry. `<Routes>` renders the match unkeyed, so
+ * two lazy pages that resolve to the same component would otherwise reuse the
+ * previous route's instance. The patterns of one entry share the key.
+ */
+export function routeElements(routes: AppRoutes[]): JSX.Element[] {
+	return routes.flatMap(({ path, component: Component, nested, key }) =>
+		(Array.isArray(path) ? path : [path]).map((pattern) => (
+			<Route
+				key={pattern}
+				path={nested ? `${pattern}/*` : pattern}
+				element={<Component key={key} />}
+			/>
+		)),
+	);
+}
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -1,4 +1,4 @@
-import { RouteProps } from 'react-router-dom';
+import type { ComponentType } from 'react';
 import ROUTES from 'constants/routes';

 import {
@@ -58,27 +58,25 @@ const routes: AppRoutes[] = [
 	{
 		component: SignupPage,
 		path: ROUTES.SIGN_UP,
-		exact: true,
 		isPrivate: false,
 		key: 'SIGN_UP',
 	},
 	{
 		path: ROUTES.GET_STARTED_WITH_CLOUD,
-		exact: false,
+		nested: true,
 		component: OnboardingV2,
 		isPrivate: true,
 		key: 'GET_STARTED_WITH_CLOUD',
 	},
 	{
 		path: ROUTES.HOME,
-		exact: true,
 		component: Home,
 		isPrivate: true,
 		key: 'HOME',
 	},
 	{
 		path: ROUTES.ONBOARDING,
-		exact: false,
+		nested: true,
 		component: OrgOnboarding,
 		isPrivate: true,
 		key: 'ONBOARDING',
@@ -86,27 +84,23 @@ const routes: AppRoutes[] = [
 	{
 		component: LogsIndexToFields,
 		path: ROUTES.LOGS_INDEX_FIELDS,
-		exact: true,
 		isPrivate: true,
 		key: 'LOGS_INDEX_FIELDS',
 	},
 	{
 		component: ServicesTablePage,
 		path: ROUTES.APPLICATION,
-		exact: true,
 		isPrivate: true,
 		key: 'APPLICATION',
 	},
 	{
 		path: ROUTES.SERVICE_METRICS,
-		exact: true,
 		component: ServiceMetricsPage,
 		isPrivate: true,
 		key: 'SERVICE_METRICS',
 	},
 	{
 		path: ROUTES.SERVICE_TOP_LEVEL_OPERATIONS,
-		exact: true,
 		component: ServiceTopLevelOperationsPage,
 		isPrivate: true,
 		key: 'SERVICE_TOP_LEVEL_OPERATIONS',
@@ -115,292 +109,252 @@ const routes: AppRoutes[] = [
 		path: ROUTES.SERVICE_MAP,
 		component: ServiceMapPage,
 		isPrivate: true,
-		exact: true,
 		key: 'SERVICE_MAP',
 	},
 	{
 		path: ROUTES.TRACE_DETAIL,
-		exact: true,
 		component: TraceDetailV3,
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,
-		exact: false,
+		nested: true,
 		component: SettingsPage,
 		isPrivate: true,
 		key: 'SETTINGS',
 	},
 	{
 		path: ROUTES.USAGE_EXPLORER,
-		exact: true,
 		component: UsageExplorerPage,
 		isPrivate: true,
 		key: 'USAGE_EXPLORER',
 	},
 	{
 		path: ROUTES.ALL_DASHBOARD,
-		exact: true,
 		component: DashboardsListPage,
 		isPrivate: true,
 		key: 'ALL_DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD,
-		exact: true,
 		component: DashboardPage,
 		isPrivate: true,
 		key: 'DASHBOARD',
 	},
 	{
 		path: ROUTES.PUBLIC_DASHBOARD,
-		exact: false,
+		nested: true,
 		component: PublicDashboardPage,
 		isPrivate: false,
 		key: 'PUBLIC_DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD_PANEL_EDITOR,
-		exact: true,
 		component: DashboardPanelEditorPage,
 		isPrivate: true,
 		key: 'DASHBOARD_PANEL_EDITOR',
 	},
 	{
 		path: ROUTES.EDIT_ALERTS,
-		exact: true,
 		component: EditRulesPage,
 		isPrivate: true,
 		key: 'EDIT_ALERTS',
 	},
 	{
 		path: ROUTES.LIST_ALL_ALERT,
-		exact: true,
 		component: ListAllALertsPage,
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
 	{
 		path: ROUTES.ALERTS_NEW,
-		exact: true,
 		component: CreateNewAlerts,
 		isPrivate: true,
 		key: 'ALERTS_NEW',
 	},
 	{
 		path: ROUTES.ALERT_HISTORY,
-		exact: true,
 		component: AlertHistory,
 		isPrivate: true,
 		key: 'ALERT_HISTORY',
 	},
 	{
 		path: ROUTES.ALERT_OVERVIEW,
-		exact: true,
 		component: AlertOverview,
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
-		exact: true,
 		component: TracesExplorer,
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS,
-		exact: true,
 		component: TracesFunnels,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS_DETAIL,
-		exact: true,
 		component: TracesFunnelDetails,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS_DETAIL',
 	},
 	{
 		path: ROUTES.CHANNELS_NEW,
-		exact: true,
 		component: ChannelsNew,
 		isPrivate: true,
 		key: 'CHANNELS_NEW',
 	},
 	{
 		path: ROUTES.CHANNELS_EDIT,
-		exact: true,
 		component: ChannelsEdit,
 		isPrivate: true,
 		key: 'CHANNELS_EDIT',
 	},
 	{
 		path: ROUTES.ALL_ERROR,
-		exact: true,
 		isPrivate: true,
 		component: AllErrors,
 		key: 'ALL_ERROR',
 	},
 	{
 		path: ROUTES.ERROR_DETAIL,
-		exact: true,
 		component: ErrorDetails,
 		isPrivate: true,
 		key: 'ERROR_DETAIL',
 	},
 	{
 		path: ROUTES.VERSION,
-		exact: true,
 		component: StatusPage,
 		isPrivate: true,
 		key: 'VERSION',
 	},
 	{
 		path: ROUTES.LOGS,
-		exact: true,
 		component: Logs,
 		key: 'LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
-		exact: true,
 		component: PipelinePage,
 		key: 'LOGS_PIPELINES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGIN,
-		exact: true,
 		component: Login,
 		isPrivate: false,
 		key: 'LOGIN',
 	},
 	{
 		path: ROUTES.FORGOT_PASSWORD,
-		exact: true,
 		component: ForgotPassword,
 		isPrivate: false,
 		key: 'FORGOT_PASSWORD',
 	},
 	{
 		path: ROUTES.UN_AUTHORIZED,
-		exact: true,
 		component: UnAuthorized,
 		key: 'UN_AUTHORIZED',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.PASSWORD_RESET,
-		exact: true,
 		component: PasswordReset,
 		key: 'PASSWORD_RESET',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.SOMETHING_WENT_WRONG,
-		exact: true,
 		component: SomethingWentWrong,
 		key: 'SOMETHING_WENT_WRONG',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.WORKSPACE_LOCKED,
-		exact: true,
 		component: WorkspaceBlocked,
 		isPrivate: true,
 		key: 'WORKSPACE_LOCKED',
 	},
 	{
 		path: ROUTES.WORKSPACE_SUSPENDED,
-		exact: true,
 		component: WorkspaceSuspended,
 		isPrivate: true,
 		key: 'WORKSPACE_SUSPENDED',
 	},
 	{
 		path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
-		exact: true,
 		component: WorkspaceAccessRestricted,
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
 	{
 		path: ROUTES.INTEGRATIONS_DETAIL,
-		exact: true,
 		component: IntegrationsDetailsPage,
 		isPrivate: true,
 		key: 'INTEGRATIONS_DETAIL',
 	},
 	{
 		path: ROUTES.INTEGRATIONS,
-		exact: true,
 		component: Integrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
-		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
-		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
-		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
-		exact: true,
 		component: MessagingQueuesMainPage,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
-		exact: true,
 		component: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_HOSTS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
-		exact: true,
 		component: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_KUBERNETES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER,
-		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_EXPLORER,
-		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
-		exact: true,
 		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_VOLUME_CONTROL',
 		isPrivate: true,
@@ -408,56 +362,48 @@ const routes: AppRoutes[] = [

 	{
 		path: ROUTES.METER,
-		exact: true,
 		component: MeterExplorerPage,
 		key: 'METER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METER_EXPLORER,
-		exact: true,
 		component: MeterExplorerPage,
 		key: 'METER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.API_MONITORING,
-		exact: true,
 		component: ApiMonitoring,
 		key: 'API_MONITORING',
 		isPrivate: true,
 	},
 	{
 		path: [ROUTES.AI_ASSISTANT_BASE, ROUTES.AI_ASSISTANT],
-		exact: true,
 		component: AIAssistantPage,
 		key: 'AI_ASSISTANT',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,
-		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_ATTRIBUTE_MAPPING',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_OVERVIEW,
-		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_EXPLORER,
-		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.AI_OBSERVABILITY_CONFIGURATION,
-		exact: true,
 		component: LLMObservabilityPage,
 		key: 'AI_OBSERVABILITY_CONFIGURATION',
 		isPrivate: true,
@@ -466,7 +412,6 @@ const routes: AppRoutes[] = [

 export const SUPPORT_ROUTE: AppRoutes = {
 	path: ROUTES.SUPPORT,
-	exact: true,
 	component: SupportPage,
 	key: 'SUPPORT',
 	isPrivate: true,
@@ -474,7 +419,6 @@ export const SUPPORT_ROUTE: AppRoutes = {

 export const LIST_LICENSES: AppRoutes = {
 	path: ROUTES.LIST_LICENSES,
-	exact: true,
 	component: LicensePage,
 	isPrivate: true,
 	key: 'LIST_LICENSES',
@@ -506,9 +450,15 @@ export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 ];

 export interface AppRoutes {
-	component: RouteProps['component'];
-	path: RouteProps['path'];
-	exact: RouteProps['exact'];
+	component: ComponentType;
+	/** An array registers the same component under each pattern. */
+	path: string | string[];
+	/**
+	 * The route renders its own child routes, so it matches as a prefix. v6
+	 * matches the whole path by default, so the mount appends a `/*` splat for
+	 * these and nothing for the rest.
+	 */
+	nested?: boolean;
 	isPrivate: boolean;
 	key: keyof typeof ROUTES;
 }
--- a/frontend/src/app/AppProviders.tsx
+++ b/frontend/src/app/AppProviders.tsx
@@ -16,6 +16,7 @@ export interface AppProvidersProps {
 	store: Store;
 	queryClient: QueryClient;
 	appContext: AppLayer;
+	router: AppLayer;
 	searchParams: AppLayer;
 }

@@ -27,27 +28,34 @@ export interface AppProvidersProps {
 * A new provider belongs here only if it holds process-wide state that does not
 * depend on the user, the license or the route. One that fetches on mount would
 * fire unauthenticated from here; put it in `AppShell` or lower.
+ *
+ * `router` is the outermost layer because `searchParams` (nuqs) reads the
+ * router's `useNavigate` / `useSearchParams`. Everything below, including the
+ * boot spinner, therefore renders inside the router.
 */
 function AppProviders({
 	children,
 	store,
 	queryClient,
 	appContext,
+	router,
 	searchParams,
 }: AppProvidersProps): JSX.Element {
 	return (
 		<HelmetProvider>
-			{searchParams(
-				<ThemeProvider>
-					<TimezoneProvider>
-						<QueryClientProvider client={queryClient}>
-							<Provider store={store}>
-								<GlobalTimeStoreAdapter />
-								{appContext(children)}
-							</Provider>
-						</QueryClientProvider>
-					</TimezoneProvider>
-				</ThemeProvider>,
+			{router(
+				searchParams(
+					<ThemeProvider>
+						<TimezoneProvider>
+							<QueryClientProvider client={queryClient}>
+								<Provider store={store}>
+									<GlobalTimeStoreAdapter />
+									{appContext(children)}
+								</Provider>
+							</QueryClientProvider>
+						</TimezoneProvider>
+					</ThemeProvider>,
+				),
 			)}
 		</HelmetProvider>
 	);
--- a/frontend/src/app/AppRouter.tsx
+++ b/frontend/src/app/AppRouter.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { unstable_HistoryRouter as HistoryRouter } from 'react-router';
+import history from 'lib/history';
+import { getBasePath } from 'utils/basePath';
+
+/**
+ * The outermost layer. It is above `NuqsAdapter` on purpose:
+ * `nuqs/adapters/react-router/v7` calls `useNavigate` and `useSearchParams`, so
+ * it only works inside a router.
+ *
+ * Transitions are off on purpose: under one React keeps the previous screen up
+ * instead of committing the Suspense fallback, so a route whose chunk is not
+ * cached yet renders no loader at all. Rendering pending UI under it needs
+ * `useNavigation()` and a data router.
+ */
+export function appRouter(children: ReactNode): ReactNode {
+	return (
+		<HistoryRouter
+			basename={getBasePath()}
+			history={history}
+			useTransitions={false}
+		>
+			{children}
+		</HistoryRouter>
+	);
+}
--- a/frontend/src/app/AppShell.tsx
+++ b/frontend/src/app/AppShell.tsx
@@ -5,11 +5,8 @@ import { NotificationProvider } from 'hooks/useNotifications';
 import { CmdKProvider } from 'providers/cmdKProvider';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';

-import { AppLayer } from './types';
-
 export interface AppShellProps {
 	children: ReactNode;
-	router: AppLayer;
 	/** Mounted beside the routed content: the command palette and its siblings. */
 	overlays?: ReactNode;
 }
@@ -19,28 +16,26 @@ export interface AppShellProps {
 * fetches settle, above `PrivateRoute`, so it also covers the redirects and the
 * not-found route, and it survives every navigation.
 *
- * A new provider belongs here if it needs the router or the user and has to
- * outlive the page: a global overlay, a shortcut host, anything one route opens
- * and the next one keeps.
+ * A new provider belongs here if it needs the user and has to outlive the page:
+ * a global overlay, a shortcut host, anything one route opens and the next one
+ * keeps. The router itself is higher up, in `AppProviders`.
 *
 * `ConfigProvider` reads `useThemeConfig`, which needs `ThemeProvider` above it,
 * so the antd theme is settled here instead of by the caller.
 */
-function AppShell({ children, router, overlays }: AppShellProps): JSX.Element {
+function AppShell({ children, overlays }: AppShellProps): JSX.Element {
 	const themeConfig = useThemeConfig();

 	return (
 		<ConfigProvider theme={themeConfig}>
-			{router(
-				<CmdKProvider>
-					<NotificationProvider>
-						<ErrorModalProvider>
-							{overlays}
-							{children}
-						</ErrorModalProvider>
-					</NotificationProvider>
-				</CmdKProvider>,
-			)}
+			<CmdKProvider>
+				<NotificationProvider>
+					<ErrorModalProvider>
+						{overlays}
+						{children}
+					</ErrorModalProvider>
+				</NotificationProvider>
+			</CmdKProvider>
 		</ConfigProvider>
 	);
 }
--- a/frontend/src/components/NotFound/snapshots/NotFound.test.tsx.snap
+++ b/frontend/src/components/NotFound/snapshots/NotFound.test.tsx.snap
@@ -121,6 +121,7 @@ exports[`Not Found page test should render Not Found page without errors 1`] = `
    </div>
    <a
      class="c3"
+      data-discover="true"
      href="/home"
      tabindex="0"
    >
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.provider.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.provider.tsx
@@ -47,23 +47,29 @@ export function QuerySearchV2Provider({
 		store.getState().setInitialExpression(initialExpression);
 	}, [initialExpression, store]);

-	const isInitialized = useRef(false);
+	// The URL owns the expression, in both directions. A provider can outlive the
+	// navigation away from the page it belongs to (a route-driven tab keeps the
+	// leaving pane mounted until its animation ends), so treating a param that
+	// disappeared as something to restore republishes it onto the URL of the page
+	// being entered.
 	useEffect(() => {
-		if (!isInitialized.current && urlExpression) {
-			const cleanedExpression = getUserExpressionFromCombined(
-				initialExpression,
-				urlExpression,
-			);
-			store.getState().initializeFromUrl(cleanedExpression);
-			isInitialized.current = true;
+		const userExpression = getUserExpressionFromCombined(
+			initialExpression,
+			urlExpression,
+		);
+		if (userExpression !== store.getState().committedExpression) {
+			store.getState().initializeFromUrl(userExpression);
 		}
 	}, [urlExpression, initialExpression, store]);

+	const publishedExpression = useRef(committedExpression);
 	useEffect(() => {
-		if (isInitialized.current || !urlExpression) {
-			setUrlExpression(committedExpression || null);
+		if (committedExpression === publishedExpression.current) {
+			return;
 		}
-	}, [committedExpression, setUrlExpression, urlExpression]);
+		publishedExpression.current = committedExpression;
+		setUrlExpression(committedExpression || null);
+	}, [committedExpression, setUrlExpression]);

 	useEffect(() => {
 		return (): void => {
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/tests/QuerySearchExpressionProvider.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/tests/QuerySearchExpressionProvider.test.tsx
@@ -110,6 +110,22 @@ describe('QuerySearchExpressionProvider', () => {
 		expect(result.current.expression).toBe('status = 500');
 	});

+	it('should follow the URL when the param is dropped', () => {
+		mockUrlValue = 'status = 500';
+
+		const { result, rerender } = renderHook(() => useTestHooks(), {
+			wrapper: createWrapper(),
+		});
+		expect(result.current.expression).toBe('status = 500');
+
+		mockSetQueryState.mockClear();
+		mockUrlValue = null;
+		rerender();
+
+		expect(result.current.expression).toBe('');
+		expect(mockSetQueryState).not.toHaveBeenCalledWith('status = 500');
+	});
+
 	it('should throw error when used outside provider', () => {
 		expect(() => {
 			renderHook(() => useExpression());
--- a/frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx
+++ b/frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -18,10 +18,10 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
-import { initialQueriesMap } from 'constants/queryBuilder';
 import K8sBaseDetails, {
 	K8sDetailsFilters,
 } from 'container/InfraMonitoringK8sV2/Base/K8sBaseDetails';
+import { DefaultQueryRedirect } from 'container/InfraMonitoringK8sV2/Base/DefaultQueryRedirect';
 import { K8sBaseList } from 'container/InfraMonitoringK8sV2/Base/K8sBaseList';
 import StatusFilter from 'container/InfraMonitoringHostsV2/StatusFilter';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8sV2/Base/types';
@@ -29,9 +29,6 @@ import {
 	InfraMonitoringEntity,
 	METRIC_NAMESPACE_BY_ENTITY,
 } from 'container/InfraMonitoringK8sV2/constants';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { DataSource } from 'types/common/queryBuilder';

 import {
 	getHostMetricsQueryPayload,
@@ -61,10 +58,6 @@ import {
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);

-	const compositeQuery = useGetCompositeQueryParam();
-	const { redirectWithQueryBuilderData } = useQueryBuilder();
-	const isInitialized = useRef(false);
-
 	const selectedTime = useGlobalTimeStore((state) => state.selectedTime);
 	const getMinMaxTime = useGlobalTimeStore((state) => state.getMinMaxTime);
 	const { startUnixMilli, endUnixMilli } = useMemo(() => {
@@ -76,28 +69,6 @@ function Hosts(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedTime, getMinMaxTime]);

-	useEffect(() => {
-		if (isInitialized.current) {
-			return;
-		}
-		isInitialized.current = true;
-
-		if (!compositeQuery) {
-			const defaultQuery = initialQueriesMap[DataSource.METRICS];
-			redirectWithQueryBuilderData({
-				...defaultQuery,
-				builder: {
-					...defaultQuery.builder,
-					queryData: defaultQuery.builder.queryData.map((query) => ({
-						...query,
-						filter: { expression: '' },
-						filters: { items: [], op: 'AND' as const },
-					})),
-				},
-			});
-		}
-	}, [compositeQuery, redirectWithQueryBuilderData]);
-
 	const handleFilterVisibilityChange = (): void => {
 		setShowFilters(!showFilters);
 	};
@@ -226,6 +197,7 @@ function Hosts(): JSX.Element {

 	return (
 		<>
+			<DefaultQueryRedirect />
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
--- a/frontend/src/container/InfraMonitoringK8sV2/Base/DefaultQueryRedirect.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/Base/DefaultQueryRedirect.tsx
@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { DataSource } from 'types/common/queryBuilder';
+
+/**
+ * Puts the default query in the URL when the page mounts without one.
+ *
+ * Render it before the list: React runs sibling effects in tree order, and this
+ * navigation drops the nuqs writes still queued, such as the page size the list
+ * writes on mount.
+ */
+export function DefaultQueryRedirect(): null {
+	const compositeQuery = useGetCompositeQueryParam();
+	const { redirectWithQueryBuilderData } = useQueryBuilder();
+	const isInitialized = useRef(false);
+
+	useEffect(() => {
+		if (isInitialized.current) {
+			return;
+		}
+		isInitialized.current = true;
+
+		if (!compositeQuery) {
+			const defaultQuery = initialQueriesMap[DataSource.METRICS];
+			redirectWithQueryBuilderData({
+				...defaultQuery,
+				builder: {
+					...defaultQuery.builder,
+					queryData: defaultQuery.builder.queryData.map((query) => ({
+						...query,
+						filter: { expression: '' },
+						filters: { items: [], op: 'AND' as const },
+					})),
+				},
+			});
+		}
+	}, [compositeQuery, redirectWithQueryBuilderData]);
+
+	return null;
+}
--- a/frontend/src/container/InfraMonitoringK8sV2/Base/K8sHeader.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/Base/K8sHeader.tsx
@@ -62,7 +62,6 @@ function K8sHeader({
 			const currentExpression =
 				currentQuery.builder.queryData[0]?.filter?.expression || '';
 			const finalExpression = newExpression ?? currentExpression;
-			void setCurrentPage(1);

 			const updatedQuery = {
 				...currentQuery,
@@ -89,6 +88,8 @@ function K8sHeader({
 			);

 			safeNavigate(`${location.pathname}?${newUrlQuery.toString()}`);
+			// After the navigation: a navigation drops the nuqs writes still queued.
+			void setCurrentPage(1);
 			void invalidateQueries();

 			if (finalExpression?.trim()) {
--- a/frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import * as Sentry from '@sentry/react';
 import { Button } from '@signozhq/ui/button';
 import { Tooltip } from '@signozhq/ui/tooltip';
@@ -9,14 +9,12 @@ import {
 	QuickFilterCheckboxUseFieldApis,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { initialQueriesMap } from 'constants/queryBuilder';
-import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { DataSource } from 'types/common/queryBuilder';

 import { CategoryIcon } from './Base/categoryIcons';
+import { DefaultQueryRedirect } from './Base/DefaultQueryRedirect';
 import { K8sDynamicList } from './Base/K8sDynamicList';
 import EntityStatusFilter from './Base/components/EntityStatusFilter/EntityStatusFilter';
 import {
@@ -68,9 +66,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const [, setNodeReadinessFilter] = useInfraMonitoringNodeReadinessFilter();
 	const [, setContainerStatusFilter] = useInfraMonitoringContainerStatusFilter();

-	const compositeQuery = useGetCompositeQueryParam();
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
-	const isInitialized = useRef(false);

 	const selectedTime = useGlobalTimeStore((state) => state.selectedTime);
 	const getMinMaxTime = useGlobalTimeStore((state) => state.getMinMaxTime);
@@ -97,28 +93,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		[getUseFieldApis, selectedCategory],
 	);

-	useEffect(() => {
-		if (isInitialized.current) {
-			return;
-		}
-		isInitialized.current = true;
-
-		if (!compositeQuery) {
-			const defaultQuery = initialQueriesMap[DataSource.METRICS];
-			redirectWithQueryBuilderData({
-				...defaultQuery,
-				builder: {
-					...defaultQuery.builder,
-					queryData: defaultQuery.builder.queryData.map((query) => ({
-						...query,
-						filter: { expression: '' },
-						filters: { items: [], op: 'AND' as const },
-					})),
-				},
-			});
-		}
-	}, [compositeQuery, redirectWithQueryBuilderData]);
-
 	useEffect(() => {
 		void logEvent(InfraMonitoringEvents.FilterApplied, {
 			entity: InfraMonitoringEvents.K8sEntity,
@@ -221,14 +195,7 @@ export default function InfraMonitoringK8s(): JSX.Element {

 	const handleCategorySelect = (key: string): void => {
 		if (key !== selectedCategory) {
-			void setSelectedCategory(key as string);
-			void setOrderBy(null);
-			void setGroupBy(null);
-			void setCurrentPage(null);
-			setSelectedItemParams(null);
-			void setPodStatusFilter(null);
-			void setNodeReadinessFilter(null);
-			void setContainerStatusFilter(null);
+			// Navigate first: a navigation drops the nuqs writes still queued.
 			redirectWithQueryBuilderData({
 				...currentQuery,
 				builder: {
@@ -242,6 +209,14 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					],
 				},
 			});
+			void setSelectedCategory(key as string);
+			void setOrderBy(null);
+			void setGroupBy(null);
+			void setCurrentPage(null);
+			setSelectedItemParams(null);
+			void setPodStatusFilter(null);
+			void setNodeReadinessFilter(null);
+			void setContainerStatusFilter(null);
 		}
 	};

@@ -270,6 +245,7 @@ export default function InfraMonitoringK8s(): JSX.Element {

 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
+			<DefaultQueryRedirect />
 			<div className={styles.infraMonitoringContainer}>
 				<div className={styles.infraContentRow}>
 					{showFilters && (
--- a/frontend/src/container/InfraMonitoringK8sV2/tests/queuedUrlWrites.test.tsx
+++ b/frontend/src/container/InfraMonitoringK8sV2/tests/queuedUrlWrites.test.tsx
@@ -0,0 +1,213 @@
+import { usePreferredPageSizeStore } from 'components/TanStackTableView/usePreferredPageSize.store';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { DataSource } from 'types/common/queryBuilder';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+
+import K8sHeader from '../Base/K8sHeader';
+import EntityDateTimeSelector from '../EntityDetailsUtils/EntityDateTimeSelector/EntityDateTimeSelector';
+import {
+	InfraMonitoringEntity,
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	K8sCategories,
+} from '../constants';
+import {
+	useInfraMonitoringCategory,
+	useInfraMonitoringSelectedItemParams,
+} from '../hooks';
+import InfraMonitoringK8s from '../InfraMonitoringK8s';
+
+// The real hook: a navigation made while a nuqs write is queued drops that write,
+// which is what these tests guard. The extension slips past jest.config.ts's mock.
+jest.mock('hooks/useSafeNavigate', () =>
+	jest.requireActual('../../../hooks/useSafeNavigate.ts'),
+);
+
+jest.mock('components/QuickFilters/QuickFilters', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="quick-filters" />,
+}));
+
+// Keeps the list's own URL write on mount: the page size.
+jest.mock('../Base/K8sDynamicList', () => {
+	const { useTableParams } = jest.requireActual('components/TanStackTableView');
+	function K8sDynamicList(): JSX.Element {
+		useTableParams(
+			{ page: 'page', limit: 'pageSize' },
+			{ page: 1, limit: 10, storageKey: 'k8s-containers' },
+		);
+		return <div data-testid="k8s-dynamic-list" />;
+	}
+	return { __esModule: true, K8sDynamicList, default: K8sDynamicList };
+});
+
+jest.mock('components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch', () => ({
+	__esModule: true,
+	default: ({ onRun }: { onRun: (expression: string) => void }): JSX.Element => (
+		<button
+			type="button"
+			aria-label="Run filter"
+			data-testid="run-filter"
+			onClick={(): void => onRun("k8s.pod.name = 'pod-1'")}
+		/>
+	),
+}));
+
+jest.mock('lib/navigation', () => ({
+	getNavigationReferrer: (): string => 'direct',
+}));
+
+const route = ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES;
+
+function DrawerHarness(): JSX.Element {
+	const [, setCategory] = useInfraMonitoringCategory();
+	const [selectedItemParams, setSelectedItemParams] =
+		useInfraMonitoringSelectedItemParams();
+
+	return (
+		<>
+			<button
+				type="button"
+				aria-label="Select category"
+				data-testid="select-category"
+				onClick={(): void => {
+					void setCategory(K8sCategories.PODS);
+				}}
+			/>
+			<button
+				type="button"
+				aria-label="Open row"
+				data-testid="open-row"
+				onClick={(): void =>
+					setSelectedItemParams({
+						selectedItem: 'pod-1',
+						clusterName: null,
+						namespaceName: null,
+					})
+				}
+			/>
+			{selectedItemParams.selectedItem && (
+				<div data-testid="drawer">
+					<EntityDateTimeSelector
+						eventEntity="k8s"
+						category={InfraMonitoringEntity.PODS}
+						view="overview"
+					/>
+				</div>
+			)}
+		</>
+	);
+}
+
+function getUrlParam(key: string): string | null {
+	return new URLSearchParams(window.location.search).get(key);
+}
+
+describe('K8s URL writes queued by nuqs', () => {
+	afterEach(() => {
+		usePreferredPageSizeStore
+			.getState()
+			.setPreferredPageSize('k8s-containers', null);
+	});
+
+	it('opens the drawer on the first click after an earlier shallow write', async () => {
+		render(<DrawerHarness />, undefined, {
+			initialRoute: `${route}?relativeTime=15m`,
+		});
+
+		fireEvent.click(screen.getByTestId('select-category'));
+		await waitFor(() =>
+			expect(getUrlParam(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY)).toBe(
+				K8sCategories.PODS,
+			),
+		);
+
+		fireEvent.click(screen.getByTestId('open-row'));
+
+		await waitFor(() =>
+			expect(getUrlParam(INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM)).toBe(
+				'pod-1',
+			),
+		);
+		expect(screen.getByTestId('drawer')).toBeInTheDocument();
+	});
+
+	it('switches category on the first click while a filter is applied', async () => {
+		const query = initialQueriesMap[DataSource.METRICS];
+		const filteredQuery = {
+			...query,
+			builder: {
+				...query.builder,
+				queryData: [
+					{
+						...query.builder.queryData[0],
+						filter: { expression: "k8s.pod.name = 'pod-1'" },
+					},
+				],
+			},
+		};
+		const params = new URLSearchParams({
+			[INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY]: K8sCategories.PODS,
+			compositeQuery: encodeURIComponent(JSON.stringify(filteredQuery)),
+		});
+
+		render(<InfraMonitoringK8s />, undefined, {
+			initialRoute: `${route}?${params.toString()}`,
+		});
+
+		fireEvent.click(
+			await screen.findByTestId(`category-${K8sCategories.CONTAINERS}`),
+		);
+
+		await waitFor(() => {
+			const compositeQuery = JSON.parse(
+				decodeURIComponent(getUrlParam('compositeQuery') ?? ''),
+			);
+			expect(compositeQuery.builder.queryData[0].filter.expression).toBe('');
+		});
+		await waitFor(() =>
+			expect(getUrlParam(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY)).toBe(
+				K8sCategories.CONTAINERS,
+			),
+		);
+	});
+
+	it('goes back to the first page when a filter runs', async () => {
+		render(
+			<K8sHeader
+				entity={InfraMonitoringEntity.PODS}
+				showAutoRefresh={false}
+				cancelQuery={jest.fn()}
+			/>,
+			undefined,
+			{ initialRoute: `${route}?relativeTime=30m&page=3` },
+		);
+
+		fireEvent.click(screen.getByTestId('run-filter'));
+
+		await waitFor(() => {
+			const compositeQuery = JSON.parse(
+				decodeURIComponent(getUrlParam('compositeQuery') ?? ''),
+			);
+			expect(compositeQuery.builder.queryData[0].filter.expression).toBe(
+				"k8s.pod.name = 'pod-1'",
+			);
+		});
+		await waitFor(() =>
+			expect(getUrlParam(INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE)).toBe('1'),
+		);
+	});
+
+	it('keeps the page size the list writes while the default query loads', async () => {
+		usePreferredPageSizeStore
+			.getState()
+			.setPreferredPageSize('k8s-containers', 25);
+
+		render(<InfraMonitoringK8s />, undefined, { initialRoute: route });
+
+		await waitFor(() => expect(getUrlParam('compositeQuery')).not.toBeNull());
+		await waitFor(() =>
+			expect(getUrlParam(INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE_SIZE)).toBe('25'),
+		);
+	});
+});
--- a/frontend/src/hooks/tests/useSafeNavigate.sameUrl.test.tsx
+++ b/frontend/src/hooks/tests/useSafeNavigate.sameUrl.test.tsx
@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+import { renderHook } from '@testing-library/react';
+import { TestRouter } from 'tests/router';
+
+// jest.config.ts maps every `useSafeNavigate` import to a mock; the extension
+// slips past that mapping.
+const { useSafeNavigate } = jest.requireActual<
+	typeof import('hooks/useSafeNavigate')
+>('../useSafeNavigate.ts');
+
+function wrapper({ children }: { children: ReactNode }): JSX.Element {
+	return <TestRouter initialRoute="/page?a=1">{children}</TestRouter>;
+}
+
+describe('useSafeNavigate same-URL check', () => {
+	let pushState: jest.SpyInstance;
+	let replaceState: jest.SpyInstance;
+
+	beforeEach(() => {
+		pushState = jest.spyOn(window.history, 'pushState');
+		replaceState = jest.spyOn(window.history, 'replaceState');
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	function render(): ReturnType<typeof useSafeNavigate>['safeNavigate'] {
+		const { result } = renderHook(() => useSafeNavigate(), { wrapper });
+		pushState.mockClear();
+		replaceState.mockClear();
+		return result.current.safeNavigate;
+	}
+
+	it('navigates to a different URL', () => {
+		const safeNavigate = render();
+
+		safeNavigate('/page?a=2');
+
+		expect(pushState).toHaveBeenCalledTimes(1);
+		expect(window.location.search).toBe('?a=2');
+	});
+
+	it('skips the URL the router is on', () => {
+		const safeNavigate = render();
+
+		safeNavigate('/page?a=1');
+
+		expect(pushState).not.toHaveBeenCalled();
+		expect(replaceState).not.toHaveBeenCalled();
+	});
+
+	it('skips the URL a shallow write published ahead of the router', () => {
+		const safeNavigate = render();
+		// A nuqs write: it reaches the address bar but not the router.
+		window.history.replaceState(window.history.state, '', '/page?a=1&b=1');
+		replaceState.mockClear();
+
+		safeNavigate('/page?a=1&b=1');
+
+		expect(pushState).not.toHaveBeenCalled();
+		expect(replaceState).not.toHaveBeenCalled();
+	});
+});
--- a/frontend/src/hooks/queryBuilder/useShareBuilderUrl.ts
+++ b/frontend/src/hooks/queryBuilder/useShareBuilderUrl.ts
@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { useAppLocation } from 'lib/router/useAppLocation';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

 import { useGetCompositeQueryParam } from './useGetCompositeQueryParam';
@@ -17,10 +18,19 @@ export const useShareBuilderUrl = ({
 }: UseShareBuilderUrlParams): void => {
 	const { resetQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const urlQuery = useUrlQuery();
+	const { pathname } = useAppLocation();
+	// The page that owns this query. A caller can keep rendering for a beat after
+	// a sibling pushes the next route (tab switches do this), and publishing then
+	// writes this page's query onto the URL of the page being entered.
+	const ownerPathname = useRef(pathname);

 	const compositeQuery = useGetCompositeQueryParam();

 	useEffect(() => {
+		if (pathname !== ownerPathname.current) {
+			return;
+		}
+
 		if (!compositeQuery || forceReset) {
 			resetQuery(defaultValue);
 			redirectWithQueryBuilderData(defaultValue);
@@ -32,5 +42,6 @@ export const useShareBuilderUrl = ({
 		compositeQuery,
 		resetQuery,
 		forceReset,
+		pathname,
 	]);
 };
--- a/frontend/src/hooks/useSafeNavigate.ts
+++ b/frontend/src/hooks/useSafeNavigate.ts
@@ -1,11 +1,12 @@
 import { useCallback } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom-v5-compat';
+import { useLocation, useNavigate } from 'react-router';
 import { cloneDeep, isEqual } from 'lodash-es';
 import { withBasePath } from 'utils/basePath';
+import { getUnstableCurrentSearchParams } from 'utils/getUnstableCurrentSearchParams';

 interface NavigateOptions {
 	replace?: boolean;
-	state?: any;
+	state?: unknown;
 	newTab?: boolean;
 }

@@ -108,6 +109,12 @@ export const useSafeNavigate = (
 			// oxlint-disable-next-line signoz/no-raw-absolute-path
 			const base = window.location.origin;
 			const currentUrl = new URL(`${location.pathname}${location.search}`, base);
+			// nuqs writes shallowly, so the address bar can be ahead of the router.
+			// Navigating to it anyway makes nuqs drop its queued writes.
+			const publishedUrl = new URL(
+				`${location.pathname}?${getUnstableCurrentSearchParams().toString()}`,
+				base,
+			);

 			let targetUrl: URL;

@@ -131,7 +138,9 @@ export const useSafeNavigate = (
 				return;
 			}

-			const urlsAreSame = areUrlsEffectivelySame(currentUrl, targetUrl);
+			const urlsAreSame =
+				areUrlsEffectivelySame(currentUrl, targetUrl) ||
+				areUrlsEffectivelySame(publishedUrl, targetUrl);
 			const isDefaultParamsNavigation = isDefaultNavigation(currentUrl, targetUrl);

 			if (preventSameUrlNavigation && urlsAreSame) {
@@ -144,9 +153,9 @@ export const useSafeNavigate = (
 			};

 			if (typeof to === 'string') {
-				navigate(to, navigationOptions);
+				void navigate(to, navigationOptions);
 			} else {
-				navigate(
+				void navigate(
 					{
 						pathname: to.pathname || location.pathname,
 						search: to.search,
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -2,10 +2,11 @@ import { ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { QueryClient } from 'react-query';
 import AppProviders from 'app/AppProviders';
+import { appRouter } from 'app/AppRouter';
 import AppRoutes from 'AppRoutes';
 import { AxiosError } from 'axios';
 import { configureOverlayScrollbars } from 'lib/configureOverlayScrollbars';
-import { NuqsAdapter } from 'nuqs/adapters/react';
+import { NuqsAdapter } from 'nuqs/adapters/react-router/v7';
 import { AppProvider } from 'providers/App/App';
 import store from 'store';
 import APIError from 'types/api/error';
@@ -61,6 +62,7 @@ if (container) {
 			store={store}
 			queryClient={queryClient}
 			appContext={appContext}
+			router={appRouter}
 			searchParams={searchParams}
 		>
 			<AppRoutes />
--- a/frontend/src/lib/history.ts
+++ b/frontend/src/lib/history.ts
@@ -1,10 +1,51 @@
-import { createBrowserHistory } from 'history';
-import { getBasePath } from 'utils/basePath';
+import {
+	type BrowserHistory,
+	createBrowserHistory,
+	createPath,
+	type Path,
+	type To,
+} from 'history';
+import type { HistoryRouterProps } from 'react-router';

-const history = createBrowserHistory({ basename: getBasePath() });
+// No `basename` here: history@5 dropped the option, so the base path lives on
+// the router (`AppRoutes/index.tsx`) for component navigation and on
+// `lib/router/navigation` for module-level navigation.
+const browserHistory = createBrowserHistory();
+
+function createURL(to: To): URL {
+	// window.location.origin is the literal string "null" in Firefox when the
+	// page is served from a local file.
+	// The raw origin, not getBaseUrl(): `to` already carries the base path when
+	// it has one, and this URL is only ever read back for its encoding.
+	// oxlint-disable-next-line signoz/no-raw-absolute-path
+	const origin = window.location.origin;
+	const base = origin !== 'null' ? origin : window.location.href;
+	const href = typeof to === 'string' ? to : createPath(to);
+	// A trailing space would be stripped by the URL parser, and it may be part
+	// of the path.
+	return new URL(href.replace(/ $/, '%20'), base);
+}
+
+/**
+ * v7 navigates through whatever history it is handed, and expects two members
+ * history@5 does not ship — `@remix-run/router` grew its own fork for them.
+ * We stay on history@5 because that fork dropped `block()`, which the
+ * unsaved-changes blocker still needs, so the two are added back here with the
+ * same implementations react-router would have used.
+ */
+// The cast covers one remaining difference: v7 declares `listen` with a
+// `delta` on the update, which history@5 does not report and the component
+// router never reads — it only forwards `action` and `location` into state.
+const history = Object.assign(browserHistory, {
+	createURL,
+	encodeLocation(to: To): Path {
+		const url = createURL(to);
+		return { pathname: url.pathname, search: url.search, hash: url.hash };
+	},
+}) as unknown as HistoryRouterProps['history'] & Pick<BrowserHistory, 'block'>;

 let inAppPushCount = 0;
-history.listen((_, action) => {
+history.listen(({ action }) => {
 	if (action === 'PUSH') {
 		inAppPushCount += 1;
 	}
--- a/frontend/src/lib/router/AppLink.tsx
+++ b/frontend/src/lib/router/AppLink.tsx
@@ -1,10 +1,8 @@
 import { forwardRef } from 'react';
 import type { AnchorHTMLAttributes, ReactNode } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';

 import type { To } from './types';
-import { useAppLocation } from './useAppLocation';
-import { withState } from './utils';

 export interface AppLinkProps extends Omit<
 	AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -18,15 +16,8 @@ export interface AppLinkProps extends Omit<

 export const AppLink = forwardRef<HTMLAnchorElement, AppLinkProps>(
 	function AppLink({ to, replace, state, children, ...rest }, ref) {
-		const location = useAppLocation();
-
 		return (
-			<Link
-				ref={ref}
-				to={withState(to, state, location)}
-				replace={replace}
-				{...rest}
-			>
+			<Link ref={ref} to={to} replace={replace} state={state} {...rest}>
 				{children}
 			</Link>
 		);
--- a/frontend/src/lib/router/Redirect.tsx
+++ b/frontend/src/lib/router/Redirect.tsx
@@ -1,12 +1,11 @@
-import { Redirect as RouterRedirect } from 'react-router-dom';
+import { Navigate } from 'react-router';

 import type { To } from './types';
-import { withState } from './utils';

 export interface RedirectProps {
 	to: To;
 	/**
-	 * Defaults to `true`, matching v5's `<Redirect>`. v6's `<Navigate>` pushes
+	 * Defaults to `true`, matching v5's `<Redirect>`. v7's `<Navigate>` pushes
 	 * unless told otherwise, which is invisible until someone presses Back.
 	 */
 	replace?: boolean;
@@ -18,7 +17,7 @@ export function Redirect({
 	replace = true,
 	state,
 }: RedirectProps): JSX.Element {
-	return <RouterRedirect to={withState(to, state)} push={!replace} />;
+	return <Navigate to={to} replace={replace} state={state} />;
 }

 Redirect.defaultProps = {
--- a/frontend/src/lib/router/tests/AppLink.test.tsx
+++ b/frontend/src/lib/router/tests/AppLink.test.tsx
@@ -1,14 +1,14 @@
 import { createRef } from 'react';
 import type { ReactNode } from 'react';
-import { useHistory } from 'react-router-dom';
 import { cleanup, fireEvent, render, screen } from 'tests/test-utils';

 import { AppLink, type AppLinkProps } from '../AppLink';
 import { useAppLocation } from '../useAppLocation';
+import { useAppNavigationType } from '../useAppNavigationType';

 function LocationProbe(): JSX.Element {
 	const location = useAppLocation();
-	const history = useHistory();
+	const navigationType = useAppNavigationType();

 	return (
 		<div>
@@ -16,7 +16,7 @@ function LocationProbe(): JSX.Element {
 			<span data-testid="search">{location.search}</span>
 			<span data-testid="hash">{location.hash}</span>
 			<span data-testid="state">{JSON.stringify(location.state ?? null)}</span>
-			<span data-testid="length">{history.length}</span>
+			<span data-testid="action">{navigationType}</span>
 		</div>
 	);
 }
@@ -146,17 +146,23 @@ describe('AppLink', () => {
 		expect(screen.getByTestId('state')).toHaveTextContent('{"from":"test"}');
 	});

+	it('pushes by default', () => {
+		renderLink({ to: '/logs', 'data-testid': 'link' } as AppLinkProps);
+		fireEvent.click(screen.getByTestId('link'));
+
+		expect(screen.getByTestId('action')).toHaveTextContent('PUSH');
+	});
+
 	it('replaces the entry when replace is set', () => {
 		renderLink({
 			to: '/logs',
 			replace: true,
 			'data-testid': 'link',
 		} as AppLinkProps);
-		const before = screen.getByTestId('length').textContent;
 		fireEvent.click(screen.getByTestId('link'));

 		expect(screen.getByTestId('pathname')).toHaveTextContent('/logs');
-		expect(screen.getByTestId('length').textContent).toBe(before);
+		expect(screen.getByTestId('action')).toHaveTextContent('REPLACE');
 	});

 	it('forwards a ref to the anchor', () => {
--- a/frontend/src/lib/router/tests/Redirect.test.tsx
+++ b/frontend/src/lib/router/tests/Redirect.test.tsx
@@ -1,19 +1,19 @@
-import { useHistory } from 'react-router-dom';
 import { render, screen } from 'tests/test-utils';

 import { Redirect, type RedirectProps } from '../Redirect';
 import { useAppLocation } from '../useAppLocation';
+import { useAppNavigationType } from '../useAppNavigationType';

 function LocationProbe(): JSX.Element {
 	const location = useAppLocation();
-	const history = useHistory();
+	const navigationType = useAppNavigationType();

 	return (
 		<div>
 			<span data-testid="pathname">{location.pathname}</span>
 			<span data-testid="search">{location.search}</span>
 			<span data-testid="state">{JSON.stringify(location.state ?? null)}</span>
-			<span data-testid="action">{history.action}</span>
+			<span data-testid="action">{navigationType}</span>
 		</div>
 	);
 }
--- a/frontend/src/lib/router/tests/buildRoutePath.test.ts
+++ b/frontend/src/lib/router/tests/buildRoutePath.test.ts
@@ -3,8 +3,9 @@ import ROUTES from 'constants/routes';
 import { buildRoutePath } from '../buildRoutePath';

 /**
- * These assertions pin every URL `buildRoutePath` produces, so a router
- * upgrade cannot change one unnoticed.
+ * The encoding contract. v7's `generatePath` percent-encodes every param with
+ * `encodeURIComponent`, so `buildRoutePath` no longer encodes anything itself
+ * and these assertions are what pins the library's behaviour.
 */
 describe('buildRoutePath', () => {
 	it('fills a single param', () => {
@@ -45,9 +46,15 @@ describe('buildRoutePath', () => {
 			expect(buildRoutePath(ROUTES.TRACE_DETAIL, { id: value })).toBe(expected);
 		});

-		it('leaves a colon alone', () => {
+		it('percent-encodes a colon', () => {
 			expect(buildRoutePath(ROUTES.TRACE_DETAIL, { id: 'a:b' })).toBe(
-				'/trace/a:b',
+				'/trace/a%3Ab',
+			);
+		});
+
+		it('encodes a raw value rather than passing an encoded one through', () => {
+			expect(buildRoutePath(ROUTES.TRACE_DETAIL, { id: 'a%2Fb' })).toBe(
+				'/trace/a%252Fb',
 			);
 		});
 	});
--- a/frontend/src/lib/router/tests/navigation.test.ts
+++ b/frontend/src/lib/router/tests/navigation.test.ts
@@ -21,6 +21,17 @@ function loadNavigation(baseHref?: string): NavigationModule {
 	return mod;
 }

+function nextUpdate(
+	nav: NavigationModule,
+): Promise<{ location: { pathname: string }; action: string }> {
+	return new Promise((resolve) => {
+		const unsubscribe = nav.subscribe((update) => {
+			unsubscribe();
+			resolve(update);
+		});
+	});
+}
+
 function settle(): Promise<void> {
 	return new Promise((resolve) => {
 		setTimeout(resolve, 60);
@@ -112,23 +123,79 @@ describe('basename ownership', () => {
 		expect(nav.getCurrentLocation().pathname).toBe('/logs');
 	});

-	it('does not double-prefix a path that already carries the base path', () => {
+	it('round-trips getCurrentLocation through navigate', () => {
 		const nav = loadNavigation('/signoz/');
 		nav.navigate('/logs');
 		nav.navigate(nav.getCurrentLocation().pathname);
 		expect(window.location.pathname).toBe('/signoz/logs');
 	});
+
+	it('prefixes a path whose first segment equals the base path', () => {
+		const nav = loadNavigation('/logs/');
+		nav.navigate('/logs/logs-explorer');
+		expect(window.location.pathname).toBe('/logs/logs/logs-explorer');
+		expect(nav.getCurrentLocation().pathname).toBe('/logs/logs-explorer');
+	});
+
+	it('prefixes the pathname of an object target', () => {
+		const nav = loadNavigation('/signoz/');
+		nav.navigate({ pathname: '/logs', search: '?a=1' });
+		expect(window.location.pathname).toBe('/signoz/logs');
+		expect(window.location.search).toBe('?a=1');
+	});
+});
+
+describe('subscribe', () => {
+	it('reports a single update object, not two arguments', async () => {
+		const nav = loadNavigation();
+		const listener = jest.fn();
+		const unsubscribe = nav.subscribe(listener);
+
+		nav.navigate('/logs');
+
+		expect(listener).toHaveBeenCalledTimes(1);
+		expect(listener.mock.calls[0]).toHaveLength(1);
+		expect(listener.mock.calls[0][0]).toMatchObject({
+			location: { pathname: '/logs' },
+			action: 'PUSH',
+		});
+		unsubscribe();
+	});
+
+	it('reports REPLACE', () => {
+		const nav = loadNavigation();
+		const listener = jest.fn();
+		const unsubscribe = nav.subscribe(listener);
+
+		nav.navigate('/logs', { replace: true });
+
+		expect(listener.mock.calls[0][0].action).toBe('REPLACE');
+		unsubscribe();
+	});
+
+	it('stops reporting after unsubscribe', () => {
+		const nav = loadNavigation();
+		const listener = jest.fn();
+		nav.subscribe(listener)();
+
+		nav.navigate('/logs');
+
+		expect(listener).not.toHaveBeenCalled();
+	});
 });

 describe('back', () => {
-	it('restores the previous location', async () => {
+	it('reports POP and restores the previous location', async () => {
 		const nav = loadNavigation();
 		nav.navigate('/logs');
 		nav.navigate('/traces');

+		const popped = nextUpdate(nav);
 		nav.back();
-		await settle();
+		const update = await popped;

+		expect(update.action).toBe('POP');
+		expect(update.location.pathname).toBe('/logs');
 		expect(nav.getCurrentLocation().pathname).toBe('/logs');
 	});
 });
@@ -343,25 +410,6 @@ describe('blockNavigation', () => {
 		expect(window.location.pathname).toBe('/b');
 	});

-	it('catches the router up when history@4 does not revert a blocked POP', async () => {
-		const nav = loadNavigation();
-		nav.navigate('/p');
-		// nuqs pushes like this, so both entries carry the same history@4 key.
-		window.history.pushState(window.history.state, '', '/p?x=1');
-		window.history.back();
-		await settle();
-
-		const seen: BlockedTransition[] = [];
-		const unblock = nav.blockNavigation((tx) => seen.push(tx));
-		window.history.forward();
-		await settle();
-		unblock();
-		seen[0].retry();
-
-		expect(nav.getCurrentLocation().search).toBe('?x=1');
-		expect(window.location.search).toBe('?x=1');
-	});
-
 	it('keeps the blocker armed when retry runs inside it', () => {
 		const nav = loadNavigation();
 		let allowNext = true;
--- a/frontend/src/lib/router/tests/useAppLocation.test.tsx
+++ b/frontend/src/lib/router/tests/useAppLocation.test.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { TestRouter } from 'tests/router';
-import { renderHook } from 'tests/test-utils';
+import { act, renderHook } from 'tests/test-utils';

 import { navigate } from '../navigation';
 import { useAppLocation } from '../useAppLocation';
@@ -25,10 +25,10 @@ describe('useAppLocation', () => {
 	});

 	it('returns the entry state', () => {
-		navigate('/logs', { replace: true, state: { from: 'test' } });
 		const { result } = renderHook(() => useAppLocation<{ from: string }>(), {
 			wrapper: TestRouter,
 		});
+		act(() => navigate('/logs', { replace: true, state: { from: 'test' } }));

 		expect(result.current.state.from).toBe('test');
 	});
--- a/frontend/src/lib/router/tests/useAppNavigate.test.tsx
+++ b/frontend/src/lib/router/tests/useAppNavigate.test.tsx
@@ -1,9 +1,9 @@
-import { useHistory } from 'react-router-dom';
 import { fireEvent, render, screen } from 'tests/test-utils';

 import type { NavigateOptions, To } from '../types';
 import { useAppLocation } from '../useAppLocation';
 import { useAppNavigate } from '../useAppNavigate';
+import { useAppNavigationType } from '../useAppNavigationType';

 function Probe({
 	to,
@@ -14,7 +14,7 @@ function Probe({
 }): JSX.Element {
 	const navigate = useAppNavigate();
 	const location = useAppLocation();
-	const history = useHistory();
+	const navigationType = useAppNavigationType();

 	return (
 		<div>
@@ -27,7 +27,7 @@ function Probe({
 			<span data-testid="pathname">{location.pathname}</span>
 			<span data-testid="search">{location.search}</span>
 			<span data-testid="state">{JSON.stringify(location.state ?? null)}</span>
-			<span data-testid="length">{history.length}</span>
+			<span data-testid="action">{navigationType}</span>
 		</div>
 	);
 }
@@ -62,20 +62,16 @@ describe('useAppNavigate', () => {

 	it('adds a history entry by default', () => {
 		renderProbe('/logs');
-		const before = screen.getByTestId('length').textContent;
 		fireEvent.click(screen.getByTestId('navigate'));

-		expect(Number(screen.getByTestId('length').textContent)).toBe(
-			Number(before) + 1,
-		);
+		expect(screen.getByTestId('action')).toHaveTextContent('PUSH');
 	});

 	it('does not add a history entry when replacing', () => {
 		renderProbe('/logs', { replace: true });
-		const before = screen.getByTestId('length').textContent;
 		fireEvent.click(screen.getByTestId('navigate'));

 		expect(screen.getByTestId('pathname')).toHaveTextContent('/logs');
-		expect(screen.getByTestId('length').textContent).toBe(before);
+		expect(screen.getByTestId('action')).toHaveTextContent('REPLACE');
 	});
 });
--- a/frontend/src/lib/router/tests/utils.test.ts
+++ b/frontend/src/lib/router/tests/utils.test.ts
@@ -1,22 +1,14 @@
-import type { History } from 'history';
-
-import { applyNavigate, retryTransition, withState } from '../utils';
+import type { NavigableHistory } from '../types';
+import { applyNavigate } from '../utils';

 function fakeHistory(): {
-	history: History;
+	history: NavigableHistory;
 	push: jest.Mock;
 	replace: jest.Mock;
-	go: jest.Mock;
 } {
 	const push = jest.fn();
 	const replace = jest.fn();
-	const go = jest.fn();
-	return {
-		history: { push, replace, go } as unknown as History,
-		push,
-		replace,
-		go,
-	};
+	return { history: { push, replace }, push, replace };
 }

 describe('applyNavigate', () => {
@@ -44,11 +36,13 @@ describe('applyNavigate', () => {
 		expect(push).toHaveBeenCalledWith('/logs', { from: '/home' });
 	});

-	it('attaches state to an object target', () => {
+	it('attaches state to an object target as its own argument', () => {
 		const { history, push } = fakeHistory();

 		applyNavigate(history, { pathname: '/logs' }, { state: { from: '/home' } });

+		// Not `{ pathname, state }`: history@5's `getNextLocation` overwrites a
+		// `state` key inside the target with the second argument.
 		expect(push).toHaveBeenCalledWith({ pathname: '/logs' }, { from: '/home' });
 	});

@@ -69,78 +63,3 @@ describe('applyNavigate', () => {
 		expect(replace).toHaveBeenCalledWith('/logs', { a: 1 });
 	});
 });
-
-describe('retryTransition', () => {
-	const location = { pathname: '/logs', search: '', hash: '', state: undefined };
-
-	it('walks a blocked POP by its distance', () => {
-		const { history, go } = fakeHistory();
-
-		retryTransition(history, location, 'POP', 2);
-
-		expect(go).toHaveBeenCalledWith(2);
-	});
-
-	it('does not reload when a blocked POP has no distance', () => {
-		const { history, go } = fakeHistory();
-
-		retryTransition(history, location, 'POP', 0);
-
-		expect(go).not.toHaveBeenCalled();
-	});
-
-	it('settles on the carried location when a blocked POP has an unknown distance', () => {
-		const { history, go, replace } = fakeHistory();
-
-		retryTransition(history, location, 'POP', null);
-
-		expect(go).not.toHaveBeenCalled();
-		expect(replace).toHaveBeenCalledWith(location);
-	});
-
-	it('replays PUSH and REPLACE from the carried location', () => {
-		const { history, push, replace } = fakeHistory();
-
-		retryTransition(history, location, 'PUSH', 0);
-		retryTransition(history, location, 'REPLACE', 0);
-
-		expect(push).toHaveBeenCalledWith(location);
-		expect(replace).toHaveBeenCalledWith(location);
-	});
-});
-
-describe('withState', () => {
-	it('returns the target untouched when there is no state', () => {
-		expect(withState('/logs?a=1', undefined)).toBe('/logs?a=1');
-	});
-
-	it('splits a string target before attaching state', () => {
-		expect(withState('/logs?a=1#top', { from: '/home' })).toStrictEqual({
-			pathname: '/logs',
-			search: '?a=1',
-			hash: '#top',
-			state: { from: '/home' },
-		});
-	});
-
-	it('resolves a search-only string against the current location', () => {
-		expect(
-			withState(
-				'?tab=2',
-				{ from: '/home' },
-				{ pathname: '/x/y', search: '?q=1', hash: '', state: null },
-			),
-		).toMatchObject({
-			pathname: '/x/y',
-			search: '?tab=2',
-			state: { from: '/home' },
-		});
-	});
-
-	it('attaches state to an object target', () => {
-		expect(withState({ pathname: '/logs' }, { from: '/home' })).toStrictEqual({
-			pathname: '/logs',
-			state: { from: '/home' },
-		});
-	});
-});
--- a/frontend/src/lib/router/buildRoutePath.ts
+++ b/frontend/src/lib/router/buildRoutePath.ts
@@ -1,16 +1,31 @@
-import { generatePath } from 'react-router-dom';
+import { generatePath } from 'react-router';

 /**
 * Fills `:param` segments in a route pattern.
 *
- * Param values are URI-encoded. `/`, `?` and `#` come back percent-encoded, so
- * a value can never introduce extra path segments or a query string. v5's
- * `generatePath` does this via path-to-regexp; v7's runs `encodeURIComponent`,
- * which also encodes `:`.
+ * Param values are passed raw and come back percent-encoded. `generatePath`
+ * runs each one through `encodeURIComponent`, so a value can never introduce
+ * extra path segments or a query string. A value that is already encoded gets
+ * encoded twice: read params back with `matchRoute` / `useAppParams`, which
+ * un-escape only `%2F`, and decode before passing one here.
+ *
+ * v7's `generatePath` types params as `string | null`, so non-strings are
+ * stringified here. `undefined` values are dropped, which leaves an optional
+ * segment out and makes a required one throw.
 */
 export function buildRoutePath(
 	pattern: string,
 	params?: Record<string, string | number | boolean | undefined>,
 ): string {
-	return generatePath(pattern, params);
+	if (params === undefined) {
+		return generatePath(pattern);
+	}
+
+	const stringified = Object.fromEntries(
+		Object.entries(params)
+			.filter(([, value]) => value !== undefined)
+			.map(([key, value]) => [key, String(value)]),
+	);
+
+	return generatePath(pattern, stringified);
 }
--- a/frontend/src/lib/router/matchRoute.ts
+++ b/frontend/src/lib/router/matchRoute.ts
@@ -1,10 +1,10 @@
-import { matchPath } from 'react-router-dom';
+import { matchPath } from 'react-router';

 import type { AppParams, RouteMatch } from './types';

 interface MatchRouteOptions {
 	/**
-	 * Defaults to `false`, matching v5's string form. v6's `end` defaults to
+	 * Defaults to `false`, matching v5's string form. v7's `end` defaults to
 	 * `true`, so callers that pass no options rely on this default and would
 	 * silently flip to exact matching without it.
 	 */
@@ -18,29 +18,22 @@ export function matchRoute<Key extends string = string>(
 ): RouteMatch<Key> | null {
 	const end = options.exact ?? false;

-	const match = matchPath<Record<string, string | undefined>>(pathname, {
-		path: pattern,
-		exact: end,
-	});
+	// v7 un-escapes `%2F` in param values itself (and nothing else), which is
+	// what keeps `buildRoutePath` -> `matchRoute` a round trip for a value
+	// containing a slash.
+	const match = matchPath(
+		{ path: pattern, end, caseSensitive: false },
+		pathname,
+	);

 	if (match === null) {
 		return null;
 	}

-	// v6.30 un-escapes `%2F` in param values (and nothing else); v5 hands them
-	// back raw. Doing it here keeps `buildRoutePath` -> `matchRoute` a round trip
-	// for values containing a slash, on both versions.
-	const params = Object.fromEntries(
-		Object.entries(match.params).map(([key, value]) => [
-			key,
-			value?.replace(/%2F/g, '/'),
-		]),
-	);
-
 	return {
-		params: params as AppParams<Key>,
-		pathname: match.url,
-		pathnameBase: match.url,
+		params: match.params as AppParams<Key>,
+		pathname: match.pathname,
+		pathnameBase: match.pathnameBase,
 		pattern: { path: pattern, caseSensitive: false, end },
 	};
 }
--- a/frontend/src/lib/router/navigation.ts
+++ b/frontend/src/lib/router/navigation.ts
@@ -1,4 +1,5 @@
 import history from 'lib/history';
+import { getBasePath, stripBasePath } from 'utils/basePath';

 import type {
 	AppLocation,
@@ -7,29 +8,7 @@ import type {
 	NavigationBlocker,
 	To,
 } from './types';
-import { applyNavigate, retryTransition, toAppLocation } from './utils';
-
-let entryKeys: Array<string | undefined> = [history.location.key];
-let currentKey = history.location.key;
-
-// history@4 reports a blocked POP's target but not how far away it is, and the
-// POP is already reverted by the time `retry` runs. Mirroring its entry keys
-// gives the distance back. Like history@4, an entry it never saw (one from
-// before a reload) counts as the first one, so a POP whose ends both land on
-// index 0 is not reverted.
-history.listen((location, action) => {
-	const index = entryKeys.indexOf(currentKey);
-	currentKey = location.key;
-	if (action === 'PUSH') {
-		entryKeys = [...entryKeys.slice(0, index + 1), location.key];
-	} else if (action === 'REPLACE' && index !== -1) {
-		entryKeys[index] = location.key;
-	}
-});
-
-function entryIndex(key: string | undefined): number {
-	return Math.max(0, entryKeys.indexOf(key));
-}
+import { applyNavigate, toAppLocation } from './utils';

 /**
 * Imperative navigation on the app's history singleton, usable from any code.
@@ -37,49 +16,104 @@ function entryIndex(key: string | undefined): number {
 * `useSafeNavigate` it does not suppress same-URL navigation and has no new-tab
 * branch, because it cannot see the current render.
 *
- * Callers pass and receive basename-free app paths.
+ * This module owns the base path. history@5 has no `basename` option, so the
+ * router carries it for component navigation and never sees what goes through
+ * here: callers pass and receive basename-free app paths, and the prepend on
+ * write and the strip on read happen below.
 */
+function toBrowserTarget(to: To): To {
+	if (typeof to === 'string') {
+		return toBrowserPath(to);
+	}
+	return to.pathname === undefined
+		? to
+		: { ...to, pathname: toBrowserPath(to.pathname) };
+}
+
+// Unconditional, like the router's basename. `withBasePath` skips a path that
+// already starts with the base path, which misses an app path whose first
+// segment is the base path's name.
+function toBrowserPath(path: string): string {
+	const basePath = getBasePath();
+	return basePath === '/' || !path.startsWith('/')
+		? path
+		: `${basePath}${path.slice(1)}`;
+}
+
+function toAppPath<S>(location: AppLocation<S>): AppLocation<S> {
+	return { ...location, pathname: stripBasePath(location.pathname) };
+}
+
 export function navigate(to: To, options?: NavigateOptions): void {
-	applyNavigate(history, to, options);
+	applyNavigate(history, toBrowserTarget(to), options);
 }

 export function back(): void {
-	history.goBack();
+	history.go(-1);
 }

 export function getCurrentLocation(): AppLocation {
-	return toAppLocation(history.location);
+	return toAppPath(toAppLocation(history.location));
 }

-export function blockNavigation(blocker: NavigationBlocker): () => void {
-	return history.block((location, action) => {
-		const appLocation = toAppLocation(location);
-		const navigationAction = action as NavigationAction;
-		const delta = entryIndex(location.key) - entryIndex(currentKey);
-		const popDelta = delta === 0 ? null : delta;
-		let deciding = true;
-		let allowed = false;
-
-		blocker({
-			location: appLocation,
-			action: navigationAction,
-			retry: () => {
-				if (deciding) {
-					allowed = true;
-					return;
-				}
-				retryTransition(history, appLocation, navigationAction, popDelta);
-			},
+export function subscribe(
+	listener: (update: {
+		location: AppLocation;
+		action: NavigationAction;
+	}) => void,
+): () => void {
+	return history.listen(({ location, action }) => {
+		listener({
+			location: toAppPath(toAppLocation(location)),
+			action: action as NavigationAction,
 		});
-		deciding = false;
-
-		// history@4 cancels the transition when the prompt returns `false`;
-		// history@5 cancels whenever a blocker is registered and hands control to
-		// `retry()`. A `retry()` inside the blocker means "let it through", and
-		// history@4 does that by not cancelling: re-issuing a POP would walk the
-		// stack twice.
-		return allowed ? undefined : false;
 	});
 }

+export function blockNavigation(blocker: NavigationBlocker): () => void {
+	let stopWaiting: (() => void) | null = null;
+	let unblock = register();
+
+	function register(): () => void {
+		return history.block((transition) => {
+			let deciding = true;
+			let allowed = false;
+
+			blocker({
+				location: toAppPath(toAppLocation(transition.location)),
+				action: transition.action as NavigationAction,
+				retry: () => {
+					if (deciding) {
+						allowed = true;
+						return;
+					}
+					transition.retry();
+				},
+			});
+			deciding = false;
+
+			if (!allowed) {
+				return;
+			}
+			// history@5 cancels every transition while a blocker is registered, so
+			// letting one through means retrying it unblocked. A retried POP lands
+			// on a later popstate, so the blocker comes back once the transition
+			// has, not straight after `retry()`.
+			unblock();
+			stopWaiting = history.listen(() => {
+				stopWaiting?.();
+				stopWaiting = null;
+				unblock = register();
+			});
+			transition.retry();
+		});
+	}
+
+	return (): void => {
+		stopWaiting?.();
+		stopWaiting = null;
+		unblock();
+	};
+}
+
 export { hasInAppHistory } from 'lib/history';
--- a/frontend/src/lib/router/types.ts
+++ b/frontend/src/lib/router/types.ts
@@ -1,7 +1,6 @@
 /**
 * Facade contracts for the router. Every shape here is defined the way
- * react-router v6+ / history@5 behaves; the v5-backed implementations adapt up
- * to it.
+ * react-router v7 / history@5 behaves.
 */

 export type NavigationAction = 'PUSH' | 'REPLACE' | 'POP';
@@ -11,7 +10,7 @@ export interface AppLocation<S = unknown> {
 	search: string;
 	hash: string;
 	state: S;
-	/** history@4 leaves this undefined on the initial entry; v6 always sets it. */
+	/** Always set by v7; optional for callers that build a location by hand. */
 	key?: string;
 }

@@ -24,7 +23,7 @@ export type AppParams<Key extends string = string> = {
 };

 /**
- * Mirrors v6's `useParams` return type so both call shapes keep working:
+ * Mirrors v7's `useParams` return type so both call shapes keep working:
 * a union of param names (`useAppParams<'dashboardId'>()`) or a record
 * (`useAppParams<{ dashboardId: string }>()`).
 */
@@ -58,6 +57,15 @@ export interface NavigateOptions {

 export type NavigateFn = (to: To, options?: NavigateOptions) => void;

+/**
+ * The slice of a history object `applyNavigate` needs, so the adapter does not
+ * have to name a particular history package.
+ */
+export interface NavigableHistory {
+	push(to: To, state?: unknown): void;
+	replace(to: To, state?: unknown): void;
+}
+
 export interface BlockedTransition {
 	location: AppLocation;
 	action: NavigationAction;
--- a/frontend/src/lib/router/useAppLocation.ts
+++ b/frontend/src/lib/router/useAppLocation.ts
@@ -1,7 +1,7 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';

 import type { AppLocation } from './types';

 export function useAppLocation<S = unknown>(): AppLocation<S> {
-	return useLocation<S>();
+	return useLocation() as AppLocation<S>;
 }
--- a/frontend/src/lib/router/useAppNavigate.ts
+++ b/frontend/src/lib/router/useAppNavigate.ts
@@ -1,21 +1,20 @@
 import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router';

 import type { NavigateFn, NavigateOptions, To } from './types';
-import { applyNavigate } from './utils';

 /**
- * Hook-context imperative navigation, for `useHistory()` call sites that only
- * push or replace. Prefer `useSafeNavigate` when the call site wants same-URL
+ * Hook-context imperative navigation, for the call sites that only push or
+ * replace. Prefer `useSafeNavigate` when the call site wants same-URL
 * suppression or new-tab handling.
 */
 export function useAppNavigate(): NavigateFn {
-	const history = useHistory();
+	const navigate = useNavigate();

 	return useCallback(
 		(to: To, options?: NavigateOptions): void => {
-			applyNavigate(history, to, options);
+			navigate(to, { replace: options?.replace, state: options?.state });
 		},
-		[history],
+		[navigate],
 	);
 }
--- a/frontend/src/lib/router/useAppNavigationType.ts
+++ b/frontend/src/lib/router/useAppNavigationType.ts
@@ -1,10 +1,10 @@
-import { useNavigationType } from 'react-router-dom-v5-compat';
+import { useNavigationType } from 'react-router';

 import type { NavigationAction } from './types';

 /**
 * The action that produced the current location (`POP` for browser back and
- * forward). v6 only; v5 exposes this as `history.action`.
+ * forward).
 */
 export function useAppNavigationType(): NavigationAction {
 	return useNavigationType();
--- a/frontend/src/lib/router/useAppParams.ts
+++ b/frontend/src/lib/router/useAppParams.ts
@@ -1,10 +1,9 @@
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';

 import type { AppParamsResult } from './types';

 /**
- * Types every param `string | undefined`, as v6 does. v5 types them as required
- * strings.
+ * Params are typed `string | undefined`, which is what v7 returns.
 */
 export function useAppParams<
 	ParamsOrKey extends string | Record<string, string | undefined> = string,
--- a/frontend/src/lib/router/useAppSearchParams.ts
+++ b/frontend/src/lib/router/useAppSearchParams.ts
@@ -1,8 +1,7 @@
-import { useSearchParams } from 'react-router-dom-v5-compat';
+import { useSearchParams } from 'react-router';

 /**
- * v6's `useSearchParams`, which has no v5 equivalent. Its setter navigates
- * through the router.
+ * Its setter navigates through the router.
 */
 export function useAppSearchParams(): ReturnType<typeof useSearchParams> {
 	return useSearchParams();
--- a/frontend/src/lib/router/utils.ts
+++ b/frontend/src/lib/router/utils.ts
@@ -1,65 +1,40 @@
-import type { History, Location, LocationDescriptor } from 'history';
-import { parsePath } from 'history';
-
 import type {
 	AppLocation,
+	NavigableHistory,
 	NavigateOptions,
-	NavigationAction,
 	To,
 } from './types';

 export function toAppLocation<S = unknown>(
-	location: Location<S>,
+	location: AppLocation<unknown>,
 ): AppLocation<S> {
 	return {
 		pathname: location.pathname,
 		search: location.search,
 		hash: location.hash,
-		state: location.state,
+		state: location.state as S,
 		key: location.key,
 	};
 }

 /**
- * v5 carries state inside `to`. The string form is parsed first, or search and
- * hash would land in `pathname`. Pass `currentLocation` where the target
- * renders an href, so a search-only or hash-only string keeps the current
- * pathname as it does without state; `history.push` resolves it on its own.
- * Not `createLocation`: its `decodeURI` runs again when the link is followed.
- */
-export function withState(
-	to: To,
-	state: unknown,
-	currentLocation?: AppLocation,
-): LocationDescriptor {
-	if (state === undefined) {
-		return to;
-	}
-	if (typeof to === 'string') {
-		const parsed = parsePath(to);
-		return {
-			...parsed,
-			pathname: parsed.pathname || currentLocation?.pathname || '',
-			state,
-		};
-	}
-	return { ...to, state };
-}
-
-/**
- * `state` always travels as the second argument, which history@4 and history@5
- * both honour for string and object targets. It is omitted rather than passed
- * as `undefined`, so a stateless `navigate(path)` reaches the history as the
- * bare `push(path)` the call sites used before the facade.
+ * history@5 takes `state` as its own argument for both the string and the
+ * object target form. A `state` key inside the target object is overwritten
+ * with `null` by `getNextLocation`, so it cannot be smuggled in there.
+ *
+ * `state` is omitted rather than passed as `undefined`, so a stateless
+ * `navigate(path)` reaches the history as the bare `push(path)` the call sites
+ * used before the facade, which is what the suites that mock `lib/history`
+ * assert on.
 */
 export function applyNavigate(
-	history: History,
+	history: NavigableHistory,
 	to: To,
 	options?: NavigateOptions,
 ): void {
 	const { replace = false, state } = options ?? {};

-	const args: Parameters<History['push']> =
+	const args: Parameters<NavigableHistory['push']> =
 		state === undefined ? [to] : [to, state];

 	if (replace) {
@@ -68,31 +43,3 @@ export function applyNavigate(
 		history.push(...args);
 	}
 }
-
-/**
- * Replays a transition that a blocker cancelled. history@4 discards the
- * transition on cancel, so it has to be re-issued from the location it carried.
- * `popDelta` walks the browser from where history@4 reverted the blocked POP
- * back to its target. It is `null` when history@4 did not revert, so the
- * browser is already on the target and only the router has to catch up.
- */
-export function retryTransition(
-	history: History,
-	location: AppLocation,
-	action: NavigationAction,
-	popDelta: number | null,
-): void {
-	if (action === 'POP') {
-		if (popDelta === null) {
-			history.replace(location);
-		} else if (popDelta !== 0) {
-			history.go(popDelta);
-		}
-		return;
-	}
-	if (action === 'REPLACE') {
-		history.replace(location);
-		return;
-	}
-	history.push(location);
-}
--- a/frontend/src/storybook/navigation/containment.ts
+++ b/frontend/src/storybook/navigation/containment.ts
@@ -1,9 +1,4 @@
-import {
-	History,
-	LocationDescriptor,
-	LocationDescriptorObject,
-	parsePath,
-} from 'history';
+import { createPath, parsePath, type Path, type To } from 'history';
 import { fn, type Mock } from 'storybook/test';

 import { recordBlockedNavigation } from './blockedNavigationStore';
@@ -11,12 +6,11 @@ import { navigateWithinPage, storyHistory, toHref } from './pageScope';

 const guardedNavigate = (
 	via: 'push' | 'replace',
-): Mock<(to: LocationDescriptor, state?: unknown) => void> =>
-	fn((to: LocationDescriptor, state?: unknown): void => {
-		const target: LocationDescriptorObject =
-			typeof to === 'string' ? { ...parsePath(to), state } : { state, ...to };
+): Mock<(to: To, state?: unknown) => void> =>
+	fn((to: To, state?: unknown): void => {
+		const target: Partial<Path> = typeof to === 'string' ? parsePath(to) : to;

-		if (navigateWithinPage(target, { replace: via === 'replace' })) {
+		if (navigateWithinPage(target, { replace: via === 'replace', state })) {
 			return;
 		}

@@ -32,8 +26,8 @@ const overriddenMethods = {
 	push: guardedNavigate('push'),
 	replace: guardedNavigate('replace'),
 	go: blockedRelativeNavigate('go'),
-	goBack: blockedRelativeNavigate('goBack'),
-	goForward: blockedRelativeNavigate('goForward'),
+	back: blockedRelativeNavigate('back'),
+	forward: blockedRelativeNavigate('forward'),
 } as const;

 type OverriddenMethod = keyof typeof overriddenMethods;
@@ -46,18 +40,38 @@ const isOverriddenMethod = (prop: string | symbol): prop is OverriddenMethod =>
 * `listen`) are proxied to the story's memory history so react-router renders
 * normally; navigation goes through `pageScope`, and whatever would leave the
 * page is swallowed and reported to `blockedNavigationStore`.
- * `react-router-dom-v5-compat` drives its `useNavigate` through this same
+ * react-router drives its `useNavigate` through this same
 * object, so `useSafeNavigate` is covered too.
 */
-export const containedHistory: History = new Proxy(storyHistory, {
-	get(target, prop, receiver) {
-		if (isOverriddenMethod(prop)) {
-			return overriddenMethods[prop];
-		}
-		return Reflect.get(target, prop, receiver);
+const createURL = (to: To): URL =>
+	new URL(
+		typeof to === 'string' ? to : createPath(to),
+		// oxlint-disable-next-line signoz/no-raw-absolute-path
+		window.location.origin,
+	);
+
+// The two members v6 expects of the history it is handed, added the way
+// `lib/history` adds them to the browser history.
+const storyHistoryForRouter = Object.assign(storyHistory, {
+	createURL,
+	encodeLocation(to: To): Path {
+		const url = createURL(to);
+		return { pathname: url.pathname, search: url.search, hash: url.hash };
 	},
 });

+export const containedHistory: typeof import('lib/history').default = new Proxy(
+	storyHistoryForRouter,
+	{
+		get(target, prop, receiver) {
+			if (isOverriddenMethod(prop)) {
+				return overriddenMethods[prop];
+			}
+			return Reflect.get(target, prop, receiver);
+		},
+	},
+) as unknown as typeof import('lib/history').default;
+
 export const hasInAppHistory = (): boolean => false;

 export const resetStoryHistory = (): void => {
--- a/frontend/src/storybook/navigation/pageScope.ts
+++ b/frontend/src/storybook/navigation/pageScope.ts
@@ -1,9 +1,4 @@
-import {
-	createMemoryHistory,
-	LocationDescriptor,
-	MemoryHistory,
-	parsePath,
-} from 'history';
+import { createMemoryHistory, MemoryHistory, parsePath, To } from 'history';

 /**
 * Query keys the Storybook preview owns. They live in the iframe's URL, which
@@ -27,7 +22,7 @@ export const storyHistory: MemoryHistory = createMemoryHistory({
 	initialEntries: ['/'],
 });

-export const toHref = (to: LocationDescriptor): string =>
+export const toHref = (to: To): string =>
 	typeof to === 'string' ? to : storyHistory.createHref(to);

 const withoutPreviewParams = (search: string): URLSearchParams => {
@@ -86,8 +81,8 @@ export const isSamePagePathname = (pathname: string | undefined): boolean =>
 * when the target is another page, leaving the caller to report it as blocked.
 */
 export const navigateWithinPage = (
-	to: LocationDescriptor,
-	{ replace = false }: { replace?: boolean } = {},
+	to: To,
+	{ replace = false, state }: { replace?: boolean; state?: unknown } = {},
 ): boolean => {
 	const target = typeof to === 'string' ? parsePath(to) : to;

@@ -98,18 +93,21 @@ export const navigateWithinPage = (
 	// The preview's params ride along in whatever the app read out of
 	// `window.location.search`, so they are dropped on the way back in and the
 	// story's history stays the page's own URL.
-	storyHistory[replace ? 'replace' : 'push']({
-		...target,
-		search: `?${withoutPreviewParams(target.search ?? '')}`,
-		pathname: storyHistory.location.pathname,
-	});
+	storyHistory[replace ? 'replace' : 'push'](
+		{
+			...target,
+			search: `?${withoutPreviewParams(target.search ?? '')}`,
+			pathname: storyHistory.location.pathname,
+		},
+		state,
+	);

 	return true;
 };

 /** Places the story at a route without going through the block. */
-export const setStoryLocation = (to: LocationDescriptor): void => {
-	storyHistory.replace(to);
+export const setStoryLocation = (to: To, state?: unknown): void => {
+	storyHistory.replace(to, state);
 	mirrorSearchToBrowser();
 };

--- a/frontend/src/storybook/providers/StorybookProviders.tsx
+++ b/frontend/src/storybook/providers/StorybookProviders.tsx
@@ -1,14 +1,12 @@
 import { ReactNode, useEffect, useMemo } from 'react';
-import { Router } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
 import AppPageProviders from '@/app/AppPageProviders';
 import AppProviders from '@/app/AppProviders';
+import { appRouter } from '@/app/AppRouter';
 import AppShell from '@/app/AppShell';
 import type { AppLayer } from '@/app/types';
 import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import { Toaster } from '@signozhq/ui/sonner';
 import AppLayout from 'container/AppLayout';
-import history from 'lib/history';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { AppContext, useAppContext } from 'providers/App/App';

@@ -41,12 +39,6 @@ function StoryContextProbe(): null {
 	return null;
 }

-const storyRouter: AppLayer = (children) => (
-	<Router history={history}>
-		<CompatRouter>{children}</CompatRouter>
-	</Router>
-);
-
 const appLayout: AppLayer = (children) => <AppLayout>{children}</AppLayout>;

 const bareLayout: AppLayer = (children) => (
@@ -89,6 +81,7 @@ function StorybookProviders({
 			appContext={(scoped): ReactNode => (
 				<AppContext.Provider value={appContextValue}>{scoped}</AppContext.Provider>
 			)}
+			router={appRouter}
 			searchParams={(scoped): ReactNode => (
 				<NuqsTestingAdapter searchParams={searchParams} hasMemory>
 					{scoped}
@@ -96,7 +89,6 @@ function StorybookProviders({
 			)}
 		>
 			<AppShell
-				router={storyRouter}
 				overlays={
 					<>
 						<StoryContextProbe />
--- a/frontend/src/storybook/providers/useStoryRoute.ts
+++ b/frontend/src/storybook/providers/useStoryRoute.ts
@@ -12,7 +12,7 @@ export const useStoryRoute = (
 	routeState?: unknown,
 ): URLSearchParams =>
 	useMemo(() => {
-		setStoryLocation({ ...parsePath(route), state: routeState });
+		setStoryLocation(parsePath(route), routeState);
 		const [, search = ''] = route.split('?');
 		return new URLSearchParams(search);
 	}, [route, routeState]);
--- a/frontend/src/storybook/renderAtRoute.tsx
+++ b/frontend/src/storybook/renderAtRoute.tsx
@@ -1,17 +1,23 @@
 import type { ComponentType } from 'react';
-import { Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router';

 /**
 * A page that reads its params out of the pathname renders under its own route
- * rather than being mounted bare. Stories declare the pattern here instead of
- * mounting a router `<Route>` themselves.
+ * rather than being mounted bare. `<Route>` only resolves inside `<Routes>`, so
+ * the pattern a story declares is mounted here instead of in each meta.
 */
 export const renderAtRoute = (
 	path: string | string[],
 	Component: ComponentType,
 ): (() => JSX.Element) => {
 	function StoryAtRoute(): JSX.Element {
-		return <Route exact path={path} component={Component} />;
+		return (
+			<Routes>
+				{(Array.isArray(path) ? path : [path]).map((pattern) => (
+					<Route key={pattern} path={pattern} element={<Component />} />
+				))}
+			</Routes>
+		);
 	}

 	return StoryAtRoute;
--- a/frontend/src/tests/router.tsx
+++ b/frontend/src/tests/router.tsx
@@ -1,16 +1,20 @@
 import { ReactElement, ReactNode, useRef } from 'react';
-import { Route, Router } from 'react-router-dom';
-import { CompatRouter, useInRouterContext } from 'react-router-dom-v5-compat';
+import {
+	Route,
+	Routes,
+	unstable_HistoryRouter as HistoryRouter,
+	useInRouterContext,
+} from 'react-router';
 import history from 'lib/history';
+import { getBasePath, withBasePath } from 'utils/basePath';

 import { resetTestRoute } from './router-utils';

 // Mounts on the `lib/history` singleton like `src/AppRoutes/index.tsx`, so
-// imperative `navigate()` calls move the router. `CompatRouter` is always
-// present for the v6-only facade hooks. A `TestRouter` inside another renders
-// its children on the outer router and cannot take an `initialRoute`: the outer
-// `CompatRouter` has already read the location, so v6-backed hooks would keep
-// the outer route.
+// imperative `navigate()` calls move the router. The base path is applied as the
+// real mount applies it. A `TestRouter` inside another renders its children on
+// the outer router and cannot take an `initialRoute`: the outer router has
+// already read the location.

 interface TestRouterProps {
 	children: ReactNode;
@@ -21,7 +25,7 @@ interface TestRouterProps {
 	initialRoute?: string;
 	/**
 	 * Route pattern(s) to mount the children under, for a component that reads
-	 * `useParams`. Matching is exact.
+	 * `useParams`. Matching is exact, which is `<Routes>`'s default.
 	 */
 	routePath?: string | string[];
 }
@@ -45,14 +49,18 @@ export function TestRouter({
 	if (!seeded.current) {
 		seeded.current = true;
 		if (initialRoute) {
-			history.replace(initialRoute);
+			// The raw history no longer strips or prepends the base path (the
+			// router owns it), so the seed has to be a real browser path.
+			history.replace(withBasePath(initialRoute));
 		}
 	}

 	const tree = routePath ? (
-		<Route exact path={routePath}>
-			{children}
-		</Route>
+		<Routes>
+			{(Array.isArray(routePath) ? routePath : [routePath]).map((pattern) => (
+				<Route key={pattern} path={pattern} element={children} />
+			))}
+		</Routes>
 	) : (
 		children
 	);
@@ -62,9 +70,9 @@ export function TestRouter({
 	}

 	return (
-		<Router history={history}>
-			<CompatRouter>{tree}</CompatRouter>
-		</Router>
+		<HistoryRouter basename={getBasePath()} history={history}>
+			{tree}
+		</HistoryRouter>
 	);
 }

--- a/frontend/src/tests/test-utils.tsx
+++ b/frontend/src/tests/test-utils.tsx
@@ -4,7 +4,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import { render, RenderOptions, RenderResult } from '@testing-library/react';
 import { ResourceProvider } from 'hooks/useResourceAttribute';
-import { NuqsAdapter } from 'nuqs/adapters/react';
+import { NuqsAdapter } from 'nuqs/adapters/react-router/v7';
 import { AppContext } from 'providers/App/App';
 import { IAppContext } from 'providers/App/types';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
--- a/frontend/src/utils/tests/base-path.test.ts
+++ b/frontend/src/utils/tests/base-path.test.ts
@@ -51,6 +51,12 @@ describe('at basePath="/"', () => {
 		expect(m.getAbsoluteUrl('/logs')).toBe(`${window.location.origin}/logs`);
 	});

+	it('stripBasePath is a no-op for any internal path', () => {
+		expect(m.stripBasePath('/logs')).toBe('/logs');
+		expect(m.stripBasePath('/logs/explorer')).toBe('/logs/explorer');
+		expect(m.stripBasePath('/')).toBe('/');
+	});
+
 	it('getBaseUrl returns bare origin', () => {
 		expect(m.getBaseUrl()).toBe(window.location.origin);
 	});
@@ -85,6 +91,39 @@ describe('at basePath="/signoz/"', () => {
 		);
 	});

+	it('stripBasePath removes the prefix', () => {
+		expect(m.stripBasePath('/signoz/logs')).toBe('/logs');
+		expect(m.stripBasePath('/signoz/logs/explorer')).toBe('/logs/explorer');
+	});
+
+	it('stripBasePath maps the prefix itself to "/"', () => {
+		expect(m.stripBasePath('/signoz/')).toBe('/');
+		expect(m.stripBasePath('/signoz')).toBe('/');
+	});
+
+	it('stripBasePath is idempotent, so safe to call twice', () => {
+		expect(m.stripBasePath(m.stripBasePath('/signoz/logs'))).toBe('/logs');
+	});
+
+	it('stripBasePath leaves a path that only looks like the prefix alone', () => {
+		expect(m.stripBasePath('/signozzz/logs')).toBe('/signozzz/logs');
+	});
+
+	it('stripBasePath matches the prefix case-insensitively, as the router does', () => {
+		expect(m.stripBasePath('/SigNoz/logs')).toBe('/logs');
+		expect(m.stripBasePath('/SIGNOZ')).toBe('/');
+	});
+
+	it('stripBasePath passes through external URLs', () => {
+		expect(m.stripBasePath('https://example.com/signoz/foo')).toBe(
+			'https://example.com/signoz/foo',
+		);
+	});
+
+	it('stripBasePath round-trips withBasePath', () => {
+		expect(m.stripBasePath(m.withBasePath('/logs?a=1'))).toBe('/logs?a=1');
+	});
+
 	it('getAbsoluteUrl returns origin + prefixed path', () => {
 		expect(m.getAbsoluteUrl('/logs')).toBe(
 			`${window.location.origin}/signoz/logs`,
--- a/frontend/src/utils/basePath.ts
+++ b/frontend/src/utils/basePath.ts
@@ -30,6 +30,32 @@ export function withBasePath(path: string): string {
 	return _basePath + path.slice(1);
 }

+/**
+ * Inverse of withBasePath: turns a real browser pathname into an app path.
+ * Idempotent and safe to call on any value.
+ *
+ *   stripBasePath('/signoz/logs') → '/logs'
+ *   stripBasePath('/logs')        → '/logs'  (already stripped)
+ *   stripBasePath('/signoz')      → '/'      (the base path itself)
+ */
+export function stripBasePath(path: string): string {
+	if (!path.startsWith('/')) {
+		return path;
+	}
+	if (_basePath === '/') {
+		return path;
+	}
+	const lowerPath = path.toLowerCase();
+	const lowerBase = _basePath.toLowerCase();
+	if (lowerPath === lowerBase || lowerPath === lowerBase.slice(0, -1)) {
+		return '/';
+	}
+	if (lowerPath.startsWith(lowerBase)) {
+		return path.slice(_basePath.length - 1);
+	}
+	return path;
+}
+
 /**
 * Full absolute URL — for copy-to-clipboard and window.open calls.
 * getAbsoluteUrl(ROUTES.LOGS_EXPLORER) → 'https://host/signoz/logs/logs-explorer'
--- a/frontend/src/utils/getUnstableCurrentSearchParams.ts
+++ b/frontend/src/utils/getUnstableCurrentSearchParams.ts
@@ -1,20 +1,22 @@
 /**
- * This was introduced to fix a sync bug between Nuqs and react-router-dom
+ * Reads the params nuqs has actually published, which `useLocation().search`
+ * (and `useUrlQuery()`) can lag behind.
 *
- * We are using the wrong adapter for nuqs because the correct one only supports v6/v7,
- * and we are at version v5. Nuqs writes params straight to the History API, which
- * react-router v5 never observes, so `useLocation().search` (and `useUrlQuery()`) can
- * be several nuqs updates behind the real URL.
+ * A nuqs write defaults to `shallow: true`, which means it calls
+ * `history.replaceState` and stops there. `nuqs/adapters/react-router/v7` only
+ * calls the router's `navigate()` when a write opts into `shallow: false`, and
+ * nothing here does. A `replaceState` made behind the router's back fires no
+ * `popstate`, so the router's location does not move. That is nuqs working as
+ * designed, not a version problem: the v5 -> v6 -> v7 migrations did not change
+ * it and the adapter swap does not either.
 *
 * Use this whenever you need to build a navigation target on top of the current
 * params, otherwise stale values get republished and nuqs adopts them back on its
 * next flush (it snapshots `window.location.search`).
- *
- * We can revert this once we migrate react-router-dom to v6.
 */

 /**
- * This was created to help testing the regression introduced between nuqs/react-router-dom
+ * Test seam for the nuqs/router sync this module papers over.
 */
 type SearchParamsGetter = () => URLSearchParams;
 let getter: SearchParamsGetter = (): URLSearchParams =>
--- a/tests/e2e/tests/routing/guards.spec.ts
+++ b/tests/e2e/tests/routing/guards.spec.ts
@@ -35,11 +35,12 @@ test.describe('Routing — auth guards', () => {
 		expect(await guest.historyDepth()).toBe(depthAtLogin + 1);

 		// Back reaches the replaced /login entry, where being logged in redirects
-		// straight out again.
+		// away. The stashed route was cleared, so the fallback is /home. Poll for
+		// /home: `goBack()` resolves before the redirect off /login, so a
+		// "not /login" poll passes on the url the pop started from.
 		await guest.goBack();
 		await expect
 			.poll(() => guest.url().pathname, { timeout: 15_000 })
-			.not.toBe(PATH.login);
-		expect(guest.url().pathname).toBe(PATH.services);
+			.toBe(PATH.home);
 	});
 });
Author	SHA1	Message	Date
Vinícius Lourenço	e3afd3b096	fix(router): stop K8s navigations dropping the page reset and page size	2026-10-30 15:47:19 -03:00
Vinícius Lourenço	27b70b5338	fix(router): stop navigations dropping queued nuqs writes	2026-10-30 15:29:54 -03:00
Vinícius Lourenço	840dc30213	fix(router): remount the page when the route entry changes	2026-10-30 14:46:59 -03:00
Vinícius Lourenço	e64a004ec9	fix(router): match the router's basename handling in module-level navigation	2026-10-30 14:46:58 -03:00
Vinícius Lourenço	59c3d156bc	fix(router): let the URL own the query search expression	2026-10-30 14:46:58 -03:00
Vinícius Lourenço	5de399f3e1	fix(router): stop the shared query builder publishing onto the next route	2026-10-30 14:46:58 -03:00
Vinícius Lourenço	34fe538d05	feat(router): upgrade to react-router v7	2026-10-30 14:46:58 -03:00