chore(deps): bump use-query-params from 1.2.3 to 2.2.2 in /superset-frontend (#36997)

Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: hainenber <dotronghai96@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: hainenber <dotronghai96@gmail.com>
2026-06-05 23:59:25 +00:00 · 2026-02-01 23:55:39 -08:00
parent ae10e105c2
commit 61bd8f0cf2
23 changed files with 108 additions and 77 deletions
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -135,7 +135,7 @@
        "urijs": "^1.19.8",
        "use-event-callback": "^0.1.0",
        "use-immer": "^0.11.0",
-        "use-query-params": "^1.1.9",
+        "use-query-params": "^2.2.2",
        "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
        "yargs": "^17.7.2"
      },
@@ -53153,13 +53153,10 @@
      }
    },
    "node_modules/serialize-query-params": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/serialize-query-params/-/serialize-query-params-1.3.6.tgz",
-      "integrity": "sha512-VlH7sfWNyPVZClPkRacopn6sn5uQMXBsjPVz1+pBHX895VpcYVznfJtZ49e6jymcrz+l/vowkepCZn/7xEAEdw==",
-      "license": "ISC",
-      "peerDependencies": {
-        "query-string": ">=5.1.1"
-      }
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/serialize-query-params/-/serialize-query-params-2.0.4.tgz",
+      "integrity": "sha512-y9WzzDj3BsGgKLCh0ugiinufS//YqOfao/yVJjkXA4VLuyNCfHOLU/cbulGPxs3aeCqhvROw7qPL04JSZnCo0w==",
+      "license": "ISC"
    },
    "node_modules/serve-index": {
      "version": "1.9.1",
@@ -57955,17 +57952,26 @@
      }
    },
    "node_modules/use-query-params": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/use-query-params/-/use-query-params-1.2.3.tgz",
-      "integrity": "sha512-cdG0tgbzK+FzsV6DAt2CN8Saa3WpRnze7uC4Rdh7l15epSFq7egmcB/zuREvPNwO5Yk80nUpDZpiyHsoq50d8w==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/use-query-params/-/use-query-params-2.2.2.tgz",
+      "integrity": "sha512-OwGab8u8/x2xZp9uSyBsx0kXlkR9IR436zbygsYVGikPYY3OJosvve6IJVGwIJPcfyb/YHwvPrUNu65/JR++Kw==",
      "license": "ISC",
      "dependencies": {
-        "serialize-query-params": "^1.3.5"
+        "serialize-query-params": "^2.0.3"
      },
      "peerDependencies": {
-        "query-string": ">=5.1.1",
+        "@reach/router": "^1.2.1",
        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
+        "react-dom": ">=16.8.0",
+        "react-router-dom": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "@reach/router": {
+          "optional": true
+        },
+        "react-router-dom": {
+          "optional": true
+        }
      }
    },
    "node_modules/use-sync-external-store": {
--- a/superset-frontend/package.json
+++ b/superset-frontend/package.json
@@ -217,7 +217,7 @@
    "urijs": "^1.19.8",
    "use-event-callback": "^0.1.0",
    "use-immer": "^0.11.0",
-    "use-query-params": "^1.1.9",
+    "use-query-params": "^2.2.2",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
    "yargs": "^17.7.2"
  },
--- a/superset-frontend/spec/helpers/ProviderWrapper.tsx
+++ b/superset-frontend/spec/helpers/ProviderWrapper.tsx
@@ -18,8 +18,10 @@
 */

 import { ThemeProvider } from '@apache-superset/core/ui';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { parse, stringify } from 'query-string';
+import { BrowserRouter as Router } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 export function ProviderWrapper(props: any) {
  const { children, theme } = props;
@@ -28,8 +30,12 @@ export function ProviderWrapper(props: any) {
    <ThemeProvider theme={theme}>
      <Router>
        <QueryParamProvider
-          ReactRouterRoute={Route}
-          stringifyOptions={{ encode: false }}
+          adapter={ReactRouter5Adapter}
+          options={{
+            searchStringToObject: parse,
+            objectToSearchString: (object: Record<string, any>) =>
+              stringify(object, { encode: false }),
+          }}
        >
          {children}
        </QueryParamProvider>
--- a/superset-frontend/spec/helpers/testing-library.tsx
+++ b/superset-frontend/spec/helpers/testing-library.tsx
@@ -43,6 +43,7 @@ import { configureStore, Store } from '@reduxjs/toolkit';
 import { api } from 'src/hooks/apiResources/queryApi';
 import userEvent from '@testing-library/user-event';
 import { ExtensionsProvider } from 'src/extensions/ExtensionsContext';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 type Options = Omit<RenderOptions, 'queries'> & {
  useRedux?: boolean;
@@ -109,7 +110,11 @@ export function createWrapper(options?: Options) {
    }

    if (useQueryParams) {
-      result = <QueryParamProvider>{result}</QueryParamProvider>;
+      result = (
+        <QueryParamProvider adapter={ReactRouter5Adapter}>
+          {result}
+        </QueryParamProvider>
+      );
    }

    if (useRouter) {
--- a/superset-frontend/src/components/ListView/ListView.test.tsx
+++ b/superset-frontend/src/components/ListView/ListView.test.tsx
@@ -19,6 +19,8 @@
 import { render, screen, within, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import { QueryParamProvider } from 'use-query-params';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { MemoryRouter } from 'react-router-dom';
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 import { ReactNode } from 'react';
@@ -51,16 +53,6 @@ type MockedListViewProps = Omit<
 const middlewares = [thunk];
 const mockStore = configureStore(middlewares);

-function makeMockLocation(query?: string) {
-  const queryStr = query ? encodeURIComponent(query) : '';
-  return {
-    protocol: 'http:',
-    host: 'localhost',
-    pathname: '/',
-    search: queryStr.length ? `?${queryStr}` : '',
-  } as Location;
-}
-
 const fetchSelectsMock = jest.fn(() =>
  Promise.resolve({ data: [], totalCount: 0 }),
 );
@@ -214,9 +206,11 @@ test('redirects to first page when page index is invalid', async () => {
 const factory = (overrides?: Partial<ListViewProps>) => {
  const props = { ...mockedPropsComprehensive, ...overrides };
  return render(
-    <QueryParamProvider location={makeMockLocation()}>
-      <ListView {...props} />
-    </QueryParamProvider>,
+    <MemoryRouter>
+      <QueryParamProvider adapter={ReactRouter5Adapter}>
+        <ListView {...props} />
+      </QueryParamProvider>
+    </MemoryRouter>,
    { store: mockStore() },
  );
 };
--- a/superset-frontend/src/embedded/EmbeddedContextProviders.tsx
+++ b/superset-frontend/src/embedded/EmbeddedContextProviders.tsx
@@ -16,7 +16,6 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { Route } from 'react-router-dom';
 import { getExtensionsRegistry } from '@superset-ui/core';
 import { Provider as ReduxProvider } from 'react-redux';
 import { QueryParamProvider } from 'use-query-params';
@@ -28,6 +27,8 @@ import { SupersetThemeProvider } from 'src/theme/ThemeProvider';
 import { ThemeController } from 'src/theme/ThemeController';
 import type { ThemeStorage } from '@apache-superset/core/ui';
 import { store } from 'src/views/store';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { parse, stringify } from 'query-string';

 /**
 * In-memory implementation of ThemeStorage interface for embedded contexts.
@@ -69,8 +70,12 @@ export const EmbeddedContextProviders: React.FC = ({ children }) => {
          <EmbeddedUiConfigProvider>
            <DynamicPluginProvider>
              <QueryParamProvider
-                ReactRouterRoute={Route}
-                stringifyOptions={{ encode: false }}
+                adapter={ReactRouter5Adapter}
+                options={{
+                  searchStringToObject: parse,
+                  objectToSearchString: (object: Record<string, any>) =>
+                    stringify(object, { encode: false }),
+                }}
              >
                {RootContextProviderExtension ? (
                  <RootContextProviderExtension>
--- a/superset-frontend/src/features/allEntities/AllEntitiesTable.test.tsx
+++ b/superset-frontend/src/features/allEntities/AllEntitiesTable.test.tsx
@@ -18,7 +18,6 @@
 */

 import { render, screen } from 'spec/helpers/testing-library';
-import * as useQueryParamsModule from 'use-query-params';
 import AllEntitiesTable from './AllEntitiesTable';

 // eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
@@ -82,12 +81,6 @@ describe('AllEntitiesTable', () => {
    ],
  };

-  beforeEach(() => {
-    jest
-      .spyOn(useQueryParamsModule, 'useQueryParam')
-      .mockReturnValue([42, jest.fn()]);
-  });
-
  afterEach(() => {
    jest.restoreAllMocks();
  });
--- a/superset-frontend/src/features/home/RightMenu.test.tsx
+++ b/superset-frontend/src/features/home/RightMenu.test.tsx
@@ -212,6 +212,7 @@ test('renders', async () => {
  resetUseSelectorMock();
  const { container } = render(<RightMenu {...mockedProps} />, {
    useRedux: true,
+    useRouter: true,
    useQueryParams: true,
    useTheme: true,
  });
@@ -225,6 +226,7 @@ test('If user has permission to upload files AND connect DBs we query existing D
  resetUseSelectorMock();
  const { container } = render(<RightMenu {...mockedProps} />, {
    useRedux: true,
+    useRouter: true,
    useQueryParams: true,
    useTheme: true,
  });
--- a/superset-frontend/src/pages/AlertReportList/AlertReportList.test.jsx
+++ b/superset-frontend/src/pages/AlertReportList/AlertReportList.test.jsx
@@ -28,6 +28,7 @@ import {
 import { MemoryRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import AlertList from 'src/pages/AlertReportList';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 const mockStore = configureStore([thunk]);
 const store = mockStore({});
@@ -86,7 +87,7 @@ fetchMock.delete(alertsEndpoint, {});
 const renderAlertList = (props = {}) =>
  render(
    <MemoryRouter>
-      <QueryParamProvider>
+      <QueryParamProvider adapter={ReactRouter5Adapter}>
        <AlertList user={mockUser} {...props} />
      </QueryParamProvider>
    </MemoryRouter>,
--- a/superset-frontend/src/pages/AnnotationLayerList/AnnotationLayerList.test.jsx
+++ b/superset-frontend/src/pages/AnnotationLayerList/AnnotationLayerList.test.jsx
@@ -29,6 +29,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';

 import AnnotationLayersList from 'src/pages/AnnotationLayerList';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 const mockStore = configureStore([thunk]);
 const store = mockStore({});
@@ -76,7 +77,7 @@ fetchMock.get(layersRelatedEndpoint, {
 const renderAnnotationLayersList = (props = {}) =>
  render(
    <MemoryRouter>
-      <QueryParamProvider>
+      <QueryParamProvider adapter={ReactRouter5Adapter}>
        <AnnotationLayersList user={mockUser} {...props} />
      </QueryParamProvider>
    </MemoryRouter>,
--- a/superset-frontend/src/pages/ChartList/ChartList.permissions.test.tsx
+++ b/superset-frontend/src/pages/ChartList/ChartList.permissions.test.tsx
@@ -25,6 +25,7 @@ import { QueryParamProvider } from 'use-query-params';
 import { isFeatureEnabled } from '@superset-ui/core';
 import ChartList from 'src/pages/ChartList';
 import { API_ENDPOINTS, mockCharts, setupMocks } from './ChartList.testHelpers';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 // Increase default timeout for all tests
 jest.setTimeout(30000);
@@ -116,7 +117,7 @@ const renderChartList = (
  return render(
    <Provider store={store}>
      <MemoryRouter>
-        <QueryParamProvider>
+        <QueryParamProvider adapter={ReactRouter5Adapter}>
          <ChartList user={user} {...props} />
        </QueryParamProvider>
      </MemoryRouter>
--- a/superset-frontend/src/pages/ChartList/ChartList.test.tsx
+++ b/superset-frontend/src/pages/ChartList/ChartList.test.tsx
@@ -31,12 +31,6 @@ import {
  setupMocks,
 } from './ChartList.testHelpers';

-const mockPush = jest.fn();
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({ push: mockPush }),
-}));
-
 jest.mock('@superset-ui/core', () => ({
  ...jest.requireActual('@superset-ui/core'),
  isFeatureEnabled: jest.fn(),
@@ -76,7 +70,6 @@ describe('ChartList', () => {
  beforeEach(() => {
    fetchMock.removeRoutes();
    setupMocks();
-    mockPush.mockClear();
  });

  afterEach(() => {
@@ -107,9 +100,12 @@ describe('ChartList', () => {
    fireEvent.click(newChartButton);

    // Verify it triggers navigation to chart creation
-    await waitFor(() => {
-      expect(mockPush).toHaveBeenCalledWith('/chart/add');
-    });
+    await waitFor(
+      () => {
+        expect(window.location.pathname).toEqual('/chart/add');
+      },
+      { timeout: 5000 },
+    );
  });

  test('verify Import button existence and functionality', async () => {
--- a/superset-frontend/src/pages/ChartList/ChartList.testHelpers.tsx
+++ b/superset-frontend/src/pages/ChartList/ChartList.testHelpers.tsx
@@ -20,11 +20,12 @@
 import fetchMock from 'fetch-mock';
 import { render } from 'spec/helpers/testing-library';
 import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { configureStore } from '@reduxjs/toolkit';
 import { QueryParamProvider } from 'use-query-params';
 import ChartList from 'src/pages/ChartList';
 import handleResourceExport from 'src/utils/export';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 export const mockHandleResourceExport =
  handleResourceExport as jest.MockedFunction<typeof handleResourceExport>;
@@ -268,11 +269,11 @@ export const renderChartList = (user: any, props = {}, storeState = {}) => {

  return render(
    <Provider store={store}>
-      <MemoryRouter>
-        <QueryParamProvider>
+      <BrowserRouter>
+        <QueryParamProvider adapter={ReactRouter5Adapter}>
          <ChartList user={user} {...props} />
        </QueryParamProvider>
-      </MemoryRouter>
+      </BrowserRouter>
    </Provider>,
  );
 };
--- a/superset-frontend/src/pages/CssTemplateList/CssTemplateList.test.jsx
+++ b/superset-frontend/src/pages/CssTemplateList/CssTemplateList.test.jsx
@@ -29,6 +29,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';

 import CssTemplatesList from 'src/pages/CssTemplateList';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 const mockStore = configureStore([thunk]);
 const store = mockStore({});
@@ -75,7 +76,7 @@ fetchMock.get(templatesRelatedEndpoint, {
 const renderCssTemplatesList = (props = {}) =>
  render(
    <MemoryRouter>
-      <QueryParamProvider>
+      <QueryParamProvider adapter={ReactRouter5Adapter}>
        <CssTemplatesList user={mockUser} {...props} />
      </QueryParamProvider>
    </MemoryRouter>,
--- a/superset-frontend/src/pages/DashboardList/DashboardList.test.jsx
+++ b/superset-frontend/src/pages/DashboardList/DashboardList.test.jsx
@@ -28,6 +28,7 @@ import {
 import { QueryParamProvider } from 'use-query-params';

 import DashboardList from 'src/pages/DashboardList';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 const dashboardsInfoEndpoint = 'glob:*/api/v1/dashboard/_info*';
 const dashboardOwnersEndpoint = 'glob:*/api/v1/dashboard/related/owners*';
@@ -89,7 +90,7 @@ describe('DashboardList', () => {
  const renderDashboardList = (props = {}, userProp = mockUser) =>
    render(
      <MemoryRouter>
-        <QueryParamProvider>
+        <QueryParamProvider adapter={ReactRouter5Adapter}>
          <DashboardList {...props} user={userProp} />
        </QueryParamProvider>
      </MemoryRouter>,
@@ -225,7 +226,7 @@ describe('DashboardList - anonymous view', () => {
  test('does not render favorite stars for anonymous user', async () => {
    render(
      <MemoryRouter>
-        <QueryParamProvider>
+        <QueryParamProvider adapter={ReactRouter5Adapter}>
          <DashboardList user={{}} />
        </QueryParamProvider>
      </MemoryRouter>,
--- a/superset-frontend/src/pages/GroupsList/GroupsList.test.tsx
+++ b/superset-frontend/src/pages/GroupsList/GroupsList.test.tsx
@@ -31,6 +31,7 @@ import {
 import { MemoryRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import GroupsList from './index';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 const mockStore = configureStore([thunk]);
 const store = mockStore({});
@@ -66,7 +67,7 @@ fetchMock.get(rolesEndpoint, {
  count: 3,
 });

-fetchMock.get(groupsEndpoint, { result: [] });
+fetchMock.get(groupsEndpoint, { result: [] }, { name: groupsEndpoint });

 jest.mock('src/dashboard/util/permissionUtils', () => ({
  ...jest.requireActual('src/dashboard/util/permissionUtils'),
@@ -79,7 +80,7 @@ describe('GroupsList', () => {
    await act(async () => {
      render(
        <MemoryRouter>
-          <QueryParamProvider>
+          <QueryParamProvider adapter={ReactRouter5Adapter}>
            <GroupsList user={mockUser} />
          </QueryParamProvider>
        </MemoryRouter>,
@@ -113,7 +114,7 @@ describe('GroupsList', () => {
    expect(await screen.findByTestId('Add Group-modal')).toBeInTheDocument();
  });

-  test.only('renders actions column for admin', async () => {
+  test('renders actions column for admin', async () => {
    await renderComponent();
    expect(screen.getAllByText('Actions')[0]).toBeInTheDocument();
  });
@@ -129,7 +130,7 @@ describe('GroupsList', () => {
    expect(within(filtersSelect).getByText(/users/i)).toBeInTheDocument();
  });

-  test.only('renders correct columns in the table', async () => {
+  test('renders correct columns in the table', async () => {
    await renderComponent();
    const table = screen.getByRole('table');

@@ -147,6 +148,7 @@ describe('GroupsList', () => {
  });

  test('opens edit modal on edit button click', async () => {
+    fetchMock.removeRoute(groupsEndpoint);
    fetchMock.get('glob:*/security/groups/?*', {
      result: [
        {
--- a/superset-frontend/src/pages/RolesList/RolesList.test.tsx
+++ b/superset-frontend/src/pages/RolesList/RolesList.test.tsx
@@ -30,6 +30,7 @@ import {
 import { MemoryRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import RolesList from './index';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 const mockStore = configureStore([thunk]);
 const store = mockStore({});
@@ -107,7 +108,7 @@ describe('RolesList', () => {
      const mockedProps = {};
      render(
        <MemoryRouter>
-          <QueryParamProvider>
+          <QueryParamProvider adapter={ReactRouter5Adapter}>
            <RolesList
              user={mockUser}
              addDangerToast={() => {}}
--- a/superset-frontend/src/pages/RowLevelSecurityList/RowLevelSecurityList.test.tsx
+++ b/superset-frontend/src/pages/RowLevelSecurityList/RowLevelSecurityList.test.tsx
@@ -22,6 +22,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import userEvent from '@testing-library/user-event';
 import RowLevelSecurityList from '.';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 const ruleListEndpoint = 'glob:*/api/v1/rowlevelsecurity/?*';
 const ruleInfoEndpoint = 'glob:*/api/v1/rowlevelsecurity/_info*';
@@ -109,7 +110,7 @@ describe('RuleList RTL', () => {
      const mockedProps = {};
      render(
        <MemoryRouter>
-          <QueryParamProvider>
+          <QueryParamProvider adapter={ReactRouter5Adapter}>
            <RowLevelSecurityList {...mockedProps} user={mockUser} />
          </QueryParamProvider>
        </MemoryRouter>,
--- a/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.tsx
+++ b/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.tsx
@@ -28,6 +28,7 @@ import {
 import { MemoryRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import SavedQueryList from '.';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 // Increase default timeout
 jest.setTimeout(30000);
@@ -85,7 +86,7 @@ fetchMock.delete(queryEndpoint, {}, { name: queryEndpoint });
 const renderList = (props = {}, storeOverrides = {}) =>
  render(
    <MemoryRouter>
-      <QueryParamProvider>
+      <QueryParamProvider adapter={ReactRouter5Adapter}>
        <SavedQueryList user={mockUser} {...props} />
      </QueryParamProvider>
    </MemoryRouter>,
--- a/superset-frontend/src/pages/UserInfo/UserInfo.test.tsx
+++ b/superset-frontend/src/pages/UserInfo/UserInfo.test.tsx
@@ -30,6 +30,7 @@ import { MemoryRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import UserInfo from 'src/pages/UserInfo';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 const mockStore = configureStore([thunk]);
 const store = mockStore({});
@@ -64,7 +65,7 @@ describe('UserInfo', () => {
    act(async () => {
      render(
        <MemoryRouter>
-          <QueryParamProvider>
+          <QueryParamProvider adapter={ReactRouter5Adapter}>
            <UserInfo user={mockUser} />
          </QueryParamProvider>
        </MemoryRouter>,
--- a/superset-frontend/src/pages/UsersList/UsersList.test.tsx
+++ b/superset-frontend/src/pages/UsersList/UsersList.test.tsx
@@ -30,6 +30,7 @@ import {
 import { MemoryRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import UsersList from './index';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';

 const mockStore = configureStore([thunk]);
 const store = mockStore({});
@@ -100,7 +101,7 @@ describe('UsersList', () => {
      const mockedProps = {};
      render(
        <MemoryRouter>
-          <QueryParamProvider>
+          <QueryParamProvider adapter={ReactRouter5Adapter}>
            <UsersList user={mockUser} {...mockedProps} />
          </QueryParamProvider>
        </MemoryRouter>,
--- a/superset-frontend/src/views/RootContextProviders.tsx
+++ b/superset-frontend/src/views/RootContextProviders.tsx
@@ -17,7 +17,6 @@
 * under the License.
 */

-import { Route } from 'react-router-dom';
 import { getExtensionsRegistry } from '@superset-ui/core';
 import { Provider as ReduxProvider } from 'react-redux';
 import { QueryParamProvider } from 'use-query-params';
@@ -30,6 +29,8 @@ import { ThemeController } from 'src/theme/ThemeController';
 import { ExtensionsProvider } from 'src/extensions/ExtensionsContext';
 import { store } from './store';
 import '../preamble';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { parse, stringify } from 'query-string';

 const themeController = new ThemeController();
 const extensionsRegistry = getExtensionsRegistry();
@@ -46,8 +47,12 @@ export const RootContextProviders: React.FC = ({ children }) => {
          <EmbeddedUiConfigProvider>
            <DynamicPluginProvider>
              <QueryParamProvider
-                ReactRouterRoute={Route}
-                stringifyOptions={{ encode: false }}
+                adapter={ReactRouter5Adapter}
+                options={{
+                  searchStringToObject: parse,
+                  objectToSearchString: (object: Record<string, any>) =>
+                    stringify(object, { encode: false }),
+                }}
              >
                <ExtensionsProvider>
                  {RootContextProviderExtension ? (
--- a/superset-frontend/src/views/menu.tsx
+++ b/superset-frontend/src/views/menu.tsx
@@ -22,7 +22,7 @@ import 'src/public-path';
 // eg, backend rendered views
 import { Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
-import { Route, BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { CacheProvider } from '@emotion/react';
 import { QueryParamProvider } from 'use-query-params';
 import createCache from '@emotion/cache';
@@ -30,6 +30,8 @@ import { ThemeProvider, theme } from '@apache-superset/core/ui';
 import Menu from 'src/features/home/Menu';
 import getBootstrapData from 'src/utils/getBootstrapData';
 import { setupStore } from './store';
+import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { parse, stringify } from 'query-string';

 // Disable connecting to redux debugger so that the React app injected
 // Below the menu like SqlLab or Explore can connect its redux store to the debugger
@@ -48,8 +50,12 @@ const app = (
      <Provider store={store}>
        <BrowserRouter>
          <QueryParamProvider
-            ReactRouterRoute={Route}
-            stringifyOptions={{ encode: false }}
+            adapter={ReactRouter5Adapter}
+            options={{
+              searchStringToObject: parse,
+              objectToSearchString: (object: Record<string, any>) =>
+                stringify(object, { encode: false }),
+            }}
          >
            <Menu data={menu} />
          </QueryParamProvider>