diff --git a/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json b/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json
index d45d91c1da..8aed33edbb 100644
--- a/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json
+++ b/packages/redux-devtools-inspector-monitor-test-tab/demo/package.json
@@ -21,7 +21,7 @@
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-redux": "^7.2.8",
-    "react-router-dom": "^5.3.1",
+    "react-router-dom": "^6.3.0",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "styled-components": "^5.3.5"
@@ -36,7 +36,6 @@
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.16",
     "@types/react-redux": "^7.1.24",
-    "@types/react-router-dom": "^5.3.3",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.25",
     "@types/webpack-env": "^1.16.4",
diff --git a/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DemoApp.tsx b/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DemoApp.tsx
index 9646552a2d..5f68b080a2 100644
--- a/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DemoApp.tsx
+++ b/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DemoApp.tsx
@@ -1,8 +1,8 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useRef } from 'react';
 import { connect } from 'react-redux';
 import { Button, Toolbar, Spacer } from '@redux-devtools/ui';
 import pkg from '@redux-devtools/inspector-monitor-test-tab/package.json';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import getOptions from './getOptions';
 import { DemoAppState } from './reducers';
 import {
@@ -69,87 +69,84 @@ interface Props
   shuffleArray: () => void;
 }
 
-class DemoApp extends React.Component<Props & RouteComponentProps> {
-  timeout?: number;
+function DemoApp(props: Props) {
+  const timeout = useRef<number | undefined>();
+  const location = useLocation();
 
-  render() {
-    const options = getOptions(this.props.location);
+  const options = getOptions(location);
 
-    return (
-      <div style={styles.wrapper}>
-        <h3>{pkg.name || <span style={styles.muted}>Package Name</span>}</h3>
-        <h5>
-          {pkg.description || (
-            <span style={styles.muted}>Package Description</span>
-          )}
-        </h5>
-        <Toolbar>
-          <Spacer />
-          <Button onClick={this.props.increment}>Increment</Button>
-          <Button onClick={this.props.push}>Push</Button>
-          <Button onClick={this.props.pop}>Pop</Button>
-          <Button onClick={this.props.replace}>Replace</Button>
-          <Button onClick={this.props.changeNested}>Change Nested</Button>
-          <Spacer />
-        </Toolbar>
-        <Toolbar>
-          <Spacer />
-          <Button onClick={this.props.pushHugeArray}>Push Huge Array</Button>
-          <Button onClick={this.props.addHugeObject}>Add Huge Object</Button>
-          <Button onClick={this.props.hugePayload}>Huge Payload</Button>
-          <Spacer />
-        </Toolbar>
-        <Toolbar>
-          <Spacer />
-          <Button onClick={this.props.addIterator}>Add Iterator</Button>
-          <Button onClick={this.props.addImmutableMap}>
-            Add Immutable Map
-          </Button>
-          <Button onClick={this.props.changeImmutableNested}>
-            Change Immutable Nested
-          </Button>
-          <Spacer />
-        </Toolbar>
-        <Toolbar>
-          <Spacer />
-          <Button onClick={this.props.addRecursive}>Add Recursive</Button>
-          <Button onClick={this.props.addFunction}>Add Function</Button>
-          <Button onClick={this.props.addSymbol}>Add Symbol</Button>
-          <Spacer />
-        </Toolbar>
-        <Toolbar>
-          <Spacer />
-          <Button onClick={this.toggleTimeoutUpdate}>
-            Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
-          </Button>
-          <Button onClick={this.props.shuffleArray}>Shuffle Array</Button>
-          <Spacer />
-        </Toolbar>
-        <div>
-          {options.useExtension ? (
-            <a href={`${ROOT}`} style={styles.link}>
-              Disable browser extension
-            </a>
-          ) : (
-            <a href={`${ROOT}?ext`} style={styles.link}>
-              Use browser extension
-            </a>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  toggleTimeoutUpdate = () => {
-    const enabled = !this.props.timeoutUpdateEnabled;
-    this.props.toggleTimeoutUpdate(enabled);
+  const toggleTimeoutUpdate = () => {
+    const enabled = !props.timeoutUpdateEnabled;
+    props.toggleTimeoutUpdate(enabled);
 
     if (enabled) {
-      this.timeout = window.setInterval(this.props.timeoutUpdate, 1000);
+      timeout.current = window.setInterval(props.timeoutUpdate, 1000);
     } else {
-      clearTimeout(this.timeout);
+      clearTimeout(timeout.current);
     }
   };
+
+  return (
+    <div style={styles.wrapper}>
+      <h3>{pkg.name || <span style={styles.muted}>Package Name</span>}</h3>
+      <h5>
+        {pkg.description || (
+          <span style={styles.muted}>Package Description</span>
+        )}
+      </h5>
+      <Toolbar>
+        <Spacer />
+        <Button onClick={props.increment}>Increment</Button>
+        <Button onClick={props.push}>Push</Button>
+        <Button onClick={props.pop}>Pop</Button>
+        <Button onClick={props.replace}>Replace</Button>
+        <Button onClick={props.changeNested}>Change Nested</Button>
+        <Spacer />
+      </Toolbar>
+      <Toolbar>
+        <Spacer />
+        <Button onClick={props.pushHugeArray}>Push Huge Array</Button>
+        <Button onClick={props.addHugeObject}>Add Huge Object</Button>
+        <Button onClick={props.hugePayload}>Huge Payload</Button>
+        <Spacer />
+      </Toolbar>
+      <Toolbar>
+        <Spacer />
+        <Button onClick={props.addIterator}>Add Iterator</Button>
+        <Button onClick={props.addImmutableMap}>Add Immutable Map</Button>
+        <Button onClick={props.changeImmutableNested}>
+          Change Immutable Nested
+        </Button>
+        <Spacer />
+      </Toolbar>
+      <Toolbar>
+        <Spacer />
+        <Button onClick={props.addRecursive}>Add Recursive</Button>
+        <Button onClick={props.addFunction}>Add Function</Button>
+        <Button onClick={props.addSymbol}>Add Symbol</Button>
+        <Spacer />
+      </Toolbar>
+      <Toolbar>
+        <Spacer />
+        <Button onClick={toggleTimeoutUpdate}>
+          Timeout Update {props.timeoutUpdateEnabled ? 'On' : 'Off'}
+        </Button>
+        <Button onClick={props.shuffleArray}>Shuffle Array</Button>
+        <Spacer />
+      </Toolbar>
+      <div>
+        {options.useExtension ? (
+          <a href={`${ROOT}`} style={styles.link}>
+            Disable browser extension
+          </a>
+        ) : (
+          <a href={`${ROOT}?ext`} style={styles.link}>
+            Use browser extension
+          </a>
+        )}
+      </div>
+    </div>
+  );
 }
 
 export default connect((state: DemoAppState) => state, {
@@ -180,4 +177,4 @@ export default connect((state: DemoAppState) => state, {
   addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }),
   addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }),
   shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }),
-})(withRouter(DemoApp));
+})(DemoApp);
diff --git a/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx b/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx
index f2988a51e2..fe45c90333 100644
--- a/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx
+++ b/packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx
@@ -6,7 +6,7 @@ import {
   Tab,
 } from '@redux-devtools/inspector-monitor';
 import { DockMonitor } from '@redux-devtools/dock-monitor';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import getOptions from './getOptions';
 import { TestTab } from '@redux-devtools/inspector-monitor-test-tab';
 import { Action } from 'redux';
@@ -36,9 +36,8 @@ export const getDevTools = (location: { search: string }) =>
     </DockMonitor>
   );
 
-const UnconnectedDevTools = ({ location }: RouteComponentProps) => {
+export function ConnectedDevTools() {
+  const location = useLocation();
   const DevTools = getDevTools(location);
   return <DevTools />;
-};
-
-export const ConnectedDevTools = withRouter(UnconnectedDevTools);
+}
diff --git a/packages/redux-devtools-inspector-monitor-test-tab/demo/src/index.tsx b/packages/redux-devtools-inspector-monitor-test-tab/demo/src/index.tsx
index 83120306ed..1e3e02034a 100644
--- a/packages/redux-devtools-inspector-monitor-test-tab/demo/src/index.tsx
+++ b/packages/redux-devtools-inspector-monitor-test-tab/demo/src/index.tsx
@@ -10,7 +10,7 @@ import {
   StoreEnhancerStoreCreator,
 } from 'redux';
 import logger from 'redux-logger';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { persistState } from '@redux-devtools/core';
 import DemoApp from './DemoApp';
 import { rootReducer } from './reducers';
@@ -60,9 +60,9 @@ render(
           colorPreference: 'auto',
         }}
       >
-        <Route path={ROOT}>
-          <DemoApp />
-        </Route>
+        <Routes>
+          <Route path={ROOT} element={<DemoApp />} />
+        </Routes>
         {!useDevtoolsExtension && <ConnectedDevTools />}
       </Container>
     </BrowserRouter>
diff --git a/packages/redux-devtools-inspector-monitor/demo/package.json b/packages/redux-devtools-inspector-monitor/demo/package.json
index 899c7e4e1c..4763770455 100644
--- a/packages/redux-devtools-inspector-monitor/demo/package.json
+++ b/packages/redux-devtools-inspector-monitor/demo/package.json
@@ -20,7 +20,7 @@
     "react-bootstrap": "^2.3.1",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.8",
-    "react-router-dom": "^5.3.1",
+    "react-router-dom": "^6.3.0",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6"
   },
@@ -35,7 +35,6 @@
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.16",
     "@types/react-redux": "^7.1.24",
-    "@types/react-router-dom": "^5.3.3",
     "@types/redux-logger": "^3.0.9",
     "@types/webpack-env": "^1.16.4",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
diff --git a/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx b/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx
index fb183e70cc..deea88129c 100644
--- a/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx
+++ b/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useRef } from 'react';
 import { connect } from 'react-redux';
 import pkg from '@redux-devtools/inspector-monitor/package.json';
 import Button from 'react-bootstrap/Button';
@@ -11,7 +11,7 @@ import InputGroup from 'react-bootstrap/InputGroup';
 import Row from 'react-bootstrap/Row';
 import * as base16 from 'base16';
 import { inspectorThemes } from '@redux-devtools/inspector-monitor';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import getOptions, { Options } from './getOptions';
 import {
   AddFunctionAction,
@@ -141,129 +141,13 @@ interface Props
   shuffleArray: () => void;
 }
 
-class DemoApp extends React.Component<Props & RouteComponentProps> {
-  timeout?: number;
+function DemoApp(props: Props) {
+  const timeout = useRef<number | undefined>();
+  const location = useLocation();
+  const navigate = useNavigate();
 
-  render() {
-    const options = getOptions(this.props.location);
-
-    return (
-      <div style={styles.wrapper}>
-        <h1 style={styles.header}>
-          {pkg.name || <span style={styles.muted}>Package Name</span>}
-        </h1>
-        <h5>
-          {pkg.description || (
-            <span style={styles.muted}>Package Description</span>
-          )}
-        </h5>
-        <div style={styles.links}>
-          <div style={styles.input}>
-            <Form>
-              <FormGroup as={Row}>
-                <Col as={FormLabel} sm={3}>
-                  Theme:
-                </Col>
-                <Col sm={9}>
-                  <InputGroup>
-                    <FormControl
-                      as="select"
-                      onChange={(event) =>
-                        this.setTheme(options, event.currentTarget.value)
-                      }
-                    >
-                      {themeOptions.map((theme) => (
-                        <option
-                          key={(theme && theme.label) || 'empty'}
-                          label={(theme && theme.label) || '──────────'}
-                          value={theme ? theme.value : undefined}
-                          disabled={!theme}
-                        />
-                      ))}
-                    </FormControl>
-                    <a onClick={this.toggleTheme} style={styles.link}>
-                      {options.dark ? 'Light theme' : 'Dark theme'}
-                    </a>
-                  </InputGroup>
-                </Col>
-              </FormGroup>
-            </Form>
-          </div>
-        </div>
-        <div style={styles.content}>
-          <div style={styles.buttons}>
-            <Button onClick={this.props.increment} style={styles.button}>
-              Increment
-            </Button>
-            <Button onClick={this.props.push} style={styles.button}>
-              Push
-            </Button>
-            <Button onClick={this.props.pop} style={styles.button}>
-              Pop
-            </Button>
-            <Button onClick={this.props.replace} style={styles.button}>
-              Replace
-            </Button>
-            <Button onClick={this.props.changeNested} style={styles.button}>
-              Change Nested
-            </Button>
-            <Button onClick={this.props.pushHugeArray} style={styles.button}>
-              Push Huge Array
-            </Button>
-            <Button onClick={this.props.addHugeObject} style={styles.button}>
-              Add Huge Object
-            </Button>
-            <Button onClick={this.props.addIterator} style={styles.button}>
-              Add Iterator
-            </Button>
-            <Button onClick={this.props.addRecursive} style={styles.button}>
-              Add Recursive
-            </Button>
-            <Button onClick={this.props.addNativeMap} style={styles.button}>
-              Add Native Map
-            </Button>
-            <Button onClick={this.props.addImmutableMap} style={styles.button}>
-              Add Immutable Map
-            </Button>
-            <Button
-              onClick={this.props.changeImmutableNested}
-              style={styles.button}
-            >
-              Change Immutable Nested
-            </Button>
-            <Button onClick={this.props.hugePayload} style={styles.button}>
-              Huge Payload
-            </Button>
-            <Button onClick={this.props.addFunction} style={styles.button}>
-              Add Function
-            </Button>
-            <Button onClick={this.props.addSymbol} style={styles.button}>
-              Add Symbol
-            </Button>
-            <Button onClick={this.toggleTimeoutUpdate} style={styles.button}>
-              Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
-            </Button>
-            <Button onClick={this.props.shuffleArray} style={styles.button}>
-              Shuffle Array
-            </Button>
-          </div>
-        </div>
-        <div style={styles.links}>
-          <a onClick={this.toggleExtension} style={styles.link}>
-            {(options.useExtension ? 'Disable' : 'Enable') +
-              ' Chrome Extension (will reload this page)'}
-          </a>
-          <a onClick={this.toggleImmutableSupport} style={styles.link}>
-            {(options.supportImmutable ? 'Disable' : 'Enable') +
-              ' Full Immutable Support'}
-          </a>
-        </div>
-      </div>
-    );
-  }
-
-  toggleExtension = () => {
-    const options = getOptions(this.props.location);
+  const toggleExtension = () => {
+    const options = getOptions(location);
 
     window.location.href = buildUrl({
       ...options,
@@ -271,34 +155,147 @@ class DemoApp extends React.Component<Props & RouteComponentProps> {
     });
   };
 
-  toggleImmutableSupport = () => {
-    const options = getOptions(this.props.location);
+  const toggleImmutableSupport = () => {
+    const options = getOptions(location);
 
-    this.props.history.push(
+    navigate(
       buildUrl({ ...options, supportImmutable: !options.supportImmutable })
     );
   };
 
-  toggleTheme = () => {
-    const options = getOptions(this.props.location);
+  const toggleTheme = () => {
+    const options = getOptions(location);
 
-    this.props.history.push(buildUrl({ ...options, dark: !options.dark }));
+    navigate(buildUrl({ ...options, dark: !options.dark }));
   };
 
-  setTheme = (options: Options, theme: string) => {
-    this.props.history.push(buildUrl({ ...options, theme }));
+  const setTheme = (options: Options, theme: string) => {
+    navigate(buildUrl({ ...options, theme }));
   };
 
-  toggleTimeoutUpdate = () => {
-    const enabled = !this.props.timeoutUpdateEnabled;
-    this.props.toggleTimeoutUpdate(enabled);
+  const toggleTimeoutUpdate = () => {
+    const enabled = !props.timeoutUpdateEnabled;
+    props.toggleTimeoutUpdate(enabled);
 
     if (enabled) {
-      this.timeout = window.setInterval(this.props.timeoutUpdate, 1000);
+      timeout.current = window.setInterval(props.timeoutUpdate, 1000);
     } else {
-      clearTimeout(this.timeout);
+      clearTimeout(timeout.current);
     }
   };
+
+  const options = getOptions(location);
+
+  return (
+    <div style={styles.wrapper}>
+      <h1 style={styles.header}>
+        {pkg.name || <span style={styles.muted}>Package Name</span>}
+      </h1>
+      <h5>
+        {pkg.description || (
+          <span style={styles.muted}>Package Description</span>
+        )}
+      </h5>
+      <div style={styles.links}>
+        <div style={styles.input}>
+          <Form>
+            <FormGroup as={Row}>
+              <Col as={FormLabel} sm={3}>
+                Theme:
+              </Col>
+              <Col sm={9}>
+                <InputGroup>
+                  <FormControl
+                    as="select"
+                    onChange={(event) =>
+                      setTheme(options, event.currentTarget.value)
+                    }
+                  >
+                    {themeOptions.map((theme) => (
+                      <option
+                        key={(theme && theme.label) || 'empty'}
+                        label={(theme && theme.label) || '──────────'}
+                        value={theme ? theme.value : undefined}
+                        disabled={!theme}
+                      />
+                    ))}
+                  </FormControl>
+                  <a onClick={toggleTheme} style={styles.link}>
+                    {options.dark ? 'Light theme' : 'Dark theme'}
+                  </a>
+                </InputGroup>
+              </Col>
+            </FormGroup>
+          </Form>
+        </div>
+      </div>
+      <div style={styles.content}>
+        <div style={styles.buttons}>
+          <Button onClick={props.increment} style={styles.button}>
+            Increment
+          </Button>
+          <Button onClick={props.push} style={styles.button}>
+            Push
+          </Button>
+          <Button onClick={props.pop} style={styles.button}>
+            Pop
+          </Button>
+          <Button onClick={props.replace} style={styles.button}>
+            Replace
+          </Button>
+          <Button onClick={props.changeNested} style={styles.button}>
+            Change Nested
+          </Button>
+          <Button onClick={props.pushHugeArray} style={styles.button}>
+            Push Huge Array
+          </Button>
+          <Button onClick={props.addHugeObject} style={styles.button}>
+            Add Huge Object
+          </Button>
+          <Button onClick={props.addIterator} style={styles.button}>
+            Add Iterator
+          </Button>
+          <Button onClick={props.addRecursive} style={styles.button}>
+            Add Recursive
+          </Button>
+          <Button onClick={props.addNativeMap} style={styles.button}>
+            Add Native Map
+          </Button>
+          <Button onClick={props.addImmutableMap} style={styles.button}>
+            Add Immutable Map
+          </Button>
+          <Button onClick={props.changeImmutableNested} style={styles.button}>
+            Change Immutable Nested
+          </Button>
+          <Button onClick={props.hugePayload} style={styles.button}>
+            Huge Payload
+          </Button>
+          <Button onClick={props.addFunction} style={styles.button}>
+            Add Function
+          </Button>
+          <Button onClick={props.addSymbol} style={styles.button}>
+            Add Symbol
+          </Button>
+          <Button onClick={toggleTimeoutUpdate} style={styles.button}>
+            Timeout Update {props.timeoutUpdateEnabled ? 'On' : 'Off'}
+          </Button>
+          <Button onClick={props.shuffleArray} style={styles.button}>
+            Shuffle Array
+          </Button>
+        </div>
+      </div>
+      <div style={styles.links}>
+        <a onClick={toggleExtension} style={styles.link}>
+          {(options.useExtension ? 'Disable' : 'Enable') +
+            ' Chrome Extension (will reload this page)'}
+        </a>
+        <a onClick={toggleImmutableSupport} style={styles.link}>
+          {(options.supportImmutable ? 'Disable' : 'Enable') +
+            ' Full Immutable Support'}
+        </a>
+      </div>
+    </div>
+  );
 }
 
 export default connect((state: DemoAppState) => state, {
@@ -330,4 +327,4 @@ export default connect((state: DemoAppState) => state, {
   addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }),
   addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }),
   shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }),
-})(withRouter(DemoApp));
+})(DemoApp);
diff --git a/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx b/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx
index cd8a58907d..4042f2a094 100644
--- a/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx
+++ b/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx
@@ -5,7 +5,7 @@ import {
   InspectorMonitor,
   base16Themes,
 } from '@redux-devtools/inspector-monitor';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import getOptions from './getOptions';
 
 const CustomComponent = () => (
@@ -46,9 +46,8 @@ export const getDevTools = (location: { search: string }) =>
     </DockMonitor>
   );
 
-const UnconnectedDevTools = ({ location }: RouteComponentProps) => {
+export function ConnectedDevTools() {
+  const location = useLocation();
   const DevTools = getDevTools(location);
   return <DevTools />;
-};
-
-export const ConnectedDevTools = withRouter(UnconnectedDevTools);
+}
diff --git a/packages/redux-devtools-inspector-monitor/demo/src/index.tsx b/packages/redux-devtools-inspector-monitor/demo/src/index.tsx
index e690bf22a2..3ce6495b69 100644
--- a/packages/redux-devtools-inspector-monitor/demo/src/index.tsx
+++ b/packages/redux-devtools-inspector-monitor/demo/src/index.tsx
@@ -9,7 +9,7 @@ import {
   StoreEnhancer,
 } from 'redux';
 import logger from 'redux-logger';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { persistState } from '@redux-devtools/core';
 import DemoApp from './DemoApp';
 import { rootReducer } from './reducers';
@@ -52,9 +52,9 @@ const store = createStore(rootReducer, enhancer);
 render(
   <Provider store={store}>
     <BrowserRouter>
-      <Route path={ROOT}>
-        <DemoApp />
-      </Route>
+      <Routes>
+        <Route path={ROOT} element={<DemoApp />} />
+      </Routes>
       {!useDevtoolsExtension && <ConnectedDevTools />}
     </BrowserRouter>
   </Provider>,
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/package.json b/packages/redux-devtools-rtk-query-monitor/demo/package.json
index f1ceab425c..f9eae22bab 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/package.json
+++ b/packages/redux-devtools-rtk-query-monitor/demo/package.json
@@ -26,7 +26,7 @@
     "react-icons": "^4.3.1",
     "react-is": "^17.0.2",
     "react-redux": "^7.2.8",
-    "react-router-dom": "^5.3.1",
+    "react-router-dom": "^6.3.0",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
@@ -40,7 +40,6 @@
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.16",
     "@types/react-redux": "^7.1.24",
-    "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx
index 35ed2cedb0..99811e4978 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import {
   useDeletePostMutation,
   useGetPostQuery,
@@ -73,13 +73,13 @@ const PostJsonDetail = ({ id }: { id: string }) => {
 
 export const PostDetail = () => {
   const { id } = useParams<{ id: string }>();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const toast = useToast();
 
   const [isEditing, setIsEditing] = useState(false);
 
-  const { data: post, isLoading } = useGetPostQuery(id);
+  const { data: post, isLoading } = useGetPostQuery(id!);
 
   const [updatePost, { isLoading: isUpdating }] = useUpdatePostMutation();
 
@@ -106,7 +106,7 @@ export const PostDetail = () => {
           name={post.name}
           onUpdate={async (name) => {
             try {
-              await updatePost({ id, name }).unwrap();
+              await updatePost({ id: id!, name }).unwrap();
             } catch {
               toast({
                 title: 'An error occurred',
@@ -137,9 +137,7 @@ export const PostDetail = () => {
                 {isUpdating ? 'Updating...' : 'Edit'}
               </Button>
               <Button
-                onClick={() =>
-                  deletePost(id).then(() => history.push('/posts'))
-                }
+                onClick={() => deletePost(id!).then(() => navigate('/posts'))}
                 disabled={isDeleting}
                 colorScheme="red"
               >
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx
index b88eeb1591..442d73ba18 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx
@@ -17,7 +17,7 @@ import {
   StatNumber,
   useToast,
 } from '@chakra-ui/react';
-import { Route, Switch, useHistory } from 'react-router-dom';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 import { MdBook } from 'react-icons/md';
 import React, { useState } from 'react';
 import {
@@ -88,7 +88,7 @@ const AddPost = () => {
 
 const PostList = () => {
   const { data: posts, isLoading } = useGetPostsQuery();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   if (isLoading) {
     return <div>Loading</div>;
@@ -101,7 +101,7 @@ const PostList = () => {
   return (
     <List spacing={3}>
       {posts.map(({ id, name }) => (
-        <ListItem key={id} onClick={() => history.push(`/posts/${id}`)}>
+        <ListItem key={id} onClick={() => navigate(`/posts/${id}`)}>
           <ListIcon as={MdBook} color="green.500" /> {name}
         </ListItem>
       ))}
@@ -147,14 +147,17 @@ export const PostsManager = () => {
           </Box>
         </Box>
         <Box flex={2}>
-          <Switch>
-            <Route path="/posts/:id" component={PostDetail} />
-            <Route>
-              <Center h="200px">
-                <Heading size="md">Select a post to edit!</Heading>
-              </Center>
-            </Route>
-          </Switch>
+          <Routes>
+            <Route path="posts/:id" element={<PostDetail />} />
+            <Route
+              index
+              element={
+                <Center h="200px">
+                  <Heading size="md">Select a post to edit!</Heading>
+                </Center>
+              }
+            />
+          </Routes>
         </Box>
       </Flex>
     </Box>
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx
index 5ce73161d7..4508f2ac93 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsView.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { PostsManager } from '../../features/posts/PostsManager';
 import { Box, Heading } from '@chakra-ui/react';
 
@@ -7,9 +7,9 @@ function PostsView() {
   return (
     <Box as="section" p="2">
       <Heading as="h2">Posts Demo</Heading>
-      <Switch>
-        <Route path="/" component={PostsManager} />
-      </Switch>
+      <Routes>
+        <Route path="/*" element={<PostsManager />} />
+      </Routes>
     </Box>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2555309307..9007a086e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1375,7 +1375,6 @@ importers:
       '@types/react': ^17.0.45
       '@types/react-dom': ^17.0.16
       '@types/react-redux': ^7.1.24
-      '@types/react-router-dom': ^5.3.3
       '@types/redux-logger': ^3.0.9
       '@types/styled-components': ^5.1.25
       '@types/webpack-env': ^1.16.4
@@ -1396,7 +1395,7 @@ importers:
       react-dom: ^17.0.2
       react-is: ^17.0.2
       react-redux: ^7.2.8
-      react-router-dom: ^5.3.1
+      react-router-dom: ^6.3.0
       redux: ^4.2.0
       redux-logger: ^3.0.6
       style-loader: ^3.3.1
@@ -1418,7 +1417,7 @@ importers:
       react-dom: 17.0.2_react@17.0.2
       react-is: 17.0.2
       react-redux: 7.2.8_react-dom@17.0.2+react@17.0.2
-      react-router-dom: 5.3.1_react@17.0.2
+      react-router-dom: 6.3.0_react-dom@17.0.2+react@17.0.2
       redux: 4.2.0
       redux-logger: 3.0.6
       styled-components: 5.3.5_281a4fa50a045c9112baf635f3bc27a7
@@ -1432,7 +1431,6 @@ importers:
       '@types/react': 17.0.45
       '@types/react-dom': 17.0.16
       '@types/react-redux': 7.1.24
-      '@types/react-router-dom': 5.3.3
       '@types/redux-logger': 3.0.9
       '@types/styled-components': 5.1.25
       '@types/webpack-env': 1.16.4
@@ -1556,7 +1554,6 @@ importers:
       '@types/react': ^17.0.45
       '@types/react-dom': ^17.0.16
       '@types/react-redux': ^7.1.24
-      '@types/react-router-dom': ^5.3.3
       '@types/redux-logger': ^3.0.9
       '@types/webpack-env': ^1.16.4
       '@typescript-eslint/eslint-plugin': ^5.22.0
@@ -1576,7 +1573,7 @@ importers:
       react-bootstrap: ^2.3.1
       react-dom: ^17.0.2
       react-redux: ^7.2.8
-      react-router-dom: ^5.3.1
+      react-router-dom: ^6.3.0
       redux: ^4.2.0
       redux-logger: ^3.0.6
       ts-node: ^10.7.0
@@ -1595,7 +1592,7 @@ importers:
       react-bootstrap: 2.3.1_569957a51d469c962fcce166a59b9f78
       react-dom: 17.0.2_react@17.0.2
       react-redux: 7.2.8_react-dom@17.0.2+react@17.0.2
-      react-router-dom: 5.3.1_react@17.0.2
+      react-router-dom: 6.3.0_react-dom@17.0.2+react@17.0.2
       redux: 4.2.0
       redux-logger: 3.0.6
     devDependencies:
@@ -1609,7 +1606,6 @@ importers:
       '@types/react': 17.0.45
       '@types/react-dom': 17.0.16
       '@types/react-redux': 7.1.24
-      '@types/react-router-dom': 5.3.3
       '@types/redux-logger': 3.0.9
       '@types/webpack-env': 1.16.4
       '@typescript-eslint/eslint-plugin': 5.22.0_9817cbad956b8aa5d1e3d9ec99e4a1e4
@@ -1887,7 +1883,6 @@ importers:
       '@types/react': ^17.0.45
       '@types/react-dom': ^17.0.16
       '@types/react-redux': ^7.1.24
-      '@types/react-router-dom': ^5.3.3
       '@types/styled-components': ^5.1.25
       '@typescript-eslint/eslint-plugin': ^5.22.0
       '@typescript-eslint/parser': ^5.22.0
@@ -1908,7 +1903,7 @@ importers:
       react-icons: ^4.3.1
       react-is: ^17.0.2
       react-redux: ^7.2.8
-      react-router-dom: ^5.3.1
+      react-router-dom: ^6.3.0
       style-loader: ^3.3.1
       styled-components: ^5.3.5
       ts-node: ^10.7.0
@@ -1933,7 +1928,7 @@ importers:
       react-icons: 4.3.1_react@17.0.2
       react-is: 17.0.2
       react-redux: 7.2.8_react-dom@17.0.2+react@17.0.2
-      react-router-dom: 5.3.1_react@17.0.2
+      react-router-dom: 6.3.0_react-dom@17.0.2+react@17.0.2
       styled-components: 5.3.5_281a4fa50a045c9112baf635f3bc27a7
     devDependencies:
       '@babel/core': 7.17.10
@@ -1946,7 +1941,6 @@ importers:
       '@types/react': 17.0.45
       '@types/react-dom': 17.0.16
       '@types/react-redux': 7.1.24
-      '@types/react-router-dom': 5.3.3
       '@types/styled-components': 5.1.25
       '@typescript-eslint/eslint-plugin': 5.22.0_9817cbad956b8aa5d1e3d9ec99e4a1e4
       '@typescript-eslint/parser': 5.22.0_eslint@8.15.0+typescript@4.6.4
@@ -8238,21 +8232,6 @@ packages:
       hoist-non-react-statics: 3.3.2
       redux: 4.2.0
 
-  /@types/react-router-dom/5.3.3:
-    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
-    dependencies:
-      '@types/history': 4.7.11
-      '@types/react': 17.0.45
-      '@types/react-router': 5.1.18
-    dev: true
-
-  /@types/react-router/5.1.18:
-    resolution: {integrity: sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==}
-    dependencies:
-      '@types/history': 4.7.11
-      '@types/react': 17.0.45
-    dev: true
-
   /@types/react-syntax-highlighter/11.0.5:
     resolution: {integrity: sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg==}
     dependencies:
@@ -13810,17 +13789,6 @@ packages:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
     dev: true
 
-  /history/4.10.1:
-    resolution: {integrity: sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==}
-    dependencies:
-      '@babel/runtime': 7.17.9
-      loose-envify: 1.4.0
-      resolve-pathname: 3.0.0
-      tiny-invariant: 1.2.0
-      tiny-warning: 1.0.3
-      value-equal: 1.0.1
-    dev: false
-
   /history/5.0.0:
     resolution: {integrity: sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==}
     dependencies:
@@ -13831,7 +13799,6 @@ packages:
     resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==}
     dependencies:
       '@babel/runtime': 7.17.9
-    dev: true
 
   /hmac-drbg/1.0.1:
     resolution: {integrity: sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=}
@@ -14700,6 +14667,7 @@ packages:
 
   /isarray/0.0.1:
     resolution: {integrity: sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=}
+    dev: true
 
   /isarray/1.0.0:
     resolution: {integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=}
@@ -16527,18 +16495,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /mini-create-react-context/0.4.1_prop-types@15.8.1+react@17.0.2:
-    resolution: {integrity: sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==}
-    peerDependencies:
-      prop-types: ^15.0.0
-      react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
-    dependencies:
-      '@babel/runtime': 7.17.9
-      prop-types: 15.8.1
-      react: 17.0.2
-      tiny-warning: 1.0.3
-    dev: false
-
   /minimalistic-assert/1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
     dev: true
@@ -17541,6 +17497,7 @@ packages:
     resolution: {integrity: sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==}
     dependencies:
       isarray: 0.0.1
+    dev: true
 
   /path-to-regexp/6.2.1:
     resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
@@ -18514,21 +18471,6 @@ packages:
       use-sidecar: 1.1.2_3df41e700a554c2356b362be396a0af4
     dev: false
 
-  /react-router-dom/5.3.1_react@17.0.2:
-    resolution: {integrity: sha512-f0pj/gMAbv9e8gahTmCEY20oFhxhrmHwYeIwH5EO5xu0qme+wXtsdB8YfUOAZzUz4VaXmb58m3ceiLtjMhqYmQ==}
-    peerDependencies:
-      react: '>=15'
-    dependencies:
-      '@babel/runtime': 7.17.9
-      history: 4.10.1
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 17.0.2
-      react-router: 5.3.1_react@17.0.2
-      tiny-invariant: 1.2.0
-      tiny-warning: 1.0.3
-    dev: false
-
   /react-router-dom/6.3.0_react-dom@17.0.2+react@17.0.2:
     resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==}
     peerDependencies:
@@ -18539,25 +18481,6 @@ packages:
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
       react-router: 6.3.0_react@17.0.2
-    dev: true
-
-  /react-router/5.3.1_react@17.0.2:
-    resolution: {integrity: sha512-v+zwjqb7bakqgF+wMVKlAPTca/cEmPOvQ9zt7gpSNyPXau1+0qvuYZ5BWzzNDP1y6s15zDwgb9rPN63+SIniRQ==}
-    peerDependencies:
-      react: '>=15'
-    dependencies:
-      '@babel/runtime': 7.17.9
-      history: 4.10.1
-      hoist-non-react-statics: 3.3.2
-      loose-envify: 1.4.0
-      mini-create-react-context: 0.4.1_prop-types@15.8.1+react@17.0.2
-      path-to-regexp: 1.8.0
-      prop-types: 15.8.1
-      react: 17.0.2
-      react-is: 16.13.1
-      tiny-invariant: 1.2.0
-      tiny-warning: 1.0.3
-    dev: false
 
   /react-router/6.3.0_react@17.0.2:
     resolution: {integrity: sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==}
@@ -18566,7 +18489,6 @@ packages:
     dependencies:
       history: 5.3.0
       react: 17.0.2
-    dev: true
 
   /react-select/5.3.2_119827f31b0360eaa21c3c49ad2eba57:
     resolution: {integrity: sha512-W6Irh7U6Ha7p5uQQ2ZnemoCQ8mcfgOtHfw3wuMzG6FAu0P+CYicgofSLOq97BhjMx8jS+h+wwWdCBeVVZ9VqlQ==}
@@ -19041,10 +18963,6 @@ packages:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
-  /resolve-pathname/3.0.0:
-    resolution: {integrity: sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==}
-    dev: false
-
   /resolve-url/0.2.1:
     resolution: {integrity: sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=}
     deprecated: https://github.com/lydell/resolve-url#deprecated
@@ -21469,10 +21387,6 @@ packages:
   /validate.io-number/1.0.3:
     resolution: {integrity: sha1-9j/+2iSL8opnqNSODjtGGhZluvg=}
 
-  /value-equal/1.0.1:
-    resolution: {integrity: sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==}
-    dev: false
-
   /value-or-promise/1.0.11:
     resolution: {integrity: sha512-41BrgH+dIbCFXClcSapVs5M6GkENd3gQOJpEfPDNa71LsUGMXDL0jMWpI/Rh7WhX+Aalfz2TTS3Zt5pUsbnhLg==}
     engines: {node: '>=12'}