From 61e71bb45546d0e5384c7e5824da34ad43716be2 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Tue, 4 Apr 2023 13:28:56 -0300
Subject: [PATCH] fix: QueryParamProvider error on backend rendered views
 (#23567)

---
 superset-frontend/src/views/menu.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/views/menu.tsx b/superset-frontend/src/views/menu.tsx
index 287634a29b..88de0cc419 100644
--- a/superset-frontend/src/views/menu.tsx
+++ b/superset-frontend/src/views/menu.tsx
@@ -20,15 +20,16 @@
 // Menu App. Used in views that do not already include the Menu component in the layout.
 // eg, backend rendered views
 import React from 'react';
+import { Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
+import { Route, BrowserRouter } from 'react-router-dom';
 import { CacheProvider } from '@emotion/react';
+import { QueryParamProvider } from 'use-query-params';
 import createCache from '@emotion/cache';
 import { ThemeProvider } from '@superset-ui/core';
 import Menu from 'src/views/components/Menu';
 import { theme } from 'src/preamble';
 import getBootstrapData from 'src/utils/getBootstrapData';
-
-import { Provider } from 'react-redux';
 import { setupStore } from './store';
 
 // Disable connecting to redux debugger so that the React app injected
@@ -46,7 +47,14 @@ const app = (
   <CacheProvider value={emotionCache}>
     <ThemeProvider theme={theme}>
       <Provider store={store}>
-        <Menu data={menu} />
+        <BrowserRouter>
+          <QueryParamProvider
+            ReactRouterRoute={Route}
+            stringifyOptions={{ encode: false }}
+          >
+            <Menu data={menu} />
+          </QueryParamProvider>
+        </BrowserRouter>
       </Provider>
     </ThemeProvider>
   </CacheProvider>