fix(deps): update dependency react-router-dom to v6 (#940)

* fix(deps): update dependency react-router-dom to v6

* inspector-monitor demo

* test-tab demo

* rtk-query-monitor

* Fix

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Nathan Bierema <nbierema@gmail.com>

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",

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,11 +69,22 @@ 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);
+
+  const toggleTimeoutUpdate = () => {
+    const enabled = !props.timeoutUpdateEnabled;
+    props.toggleTimeoutUpdate(enabled);
+
+    if (enabled) {
+      timeout.current = window.setInterval(props.timeoutUpdate, 1000);
+    } else {
+      clearTimeout(timeout.current);
+    }
+  };
 
   return (
     <div style={styles.wrapper}>
@@ -85,44 +96,42 @@ class DemoApp extends React.Component<Props & RouteComponentProps> {
       </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>
+        <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={this.props.pushHugeArray}>Push Huge Array</Button>
-          <Button onClick={this.props.addHugeObject}>Add Huge Object</Button>
-          <Button onClick={this.props.hugePayload}>Huge Payload</Button>
+        <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={this.props.addIterator}>Add Iterator</Button>
-          <Button onClick={this.props.addImmutableMap}>
-            Add Immutable Map
-          </Button>
-          <Button onClick={this.props.changeImmutableNested}>
+        <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={this.props.addRecursive}>Add Recursive</Button>
-          <Button onClick={this.props.addFunction}>Add Function</Button>
-          <Button onClick={this.props.addSymbol}>Add Symbol</Button>
+        <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={this.toggleTimeoutUpdate}>
-            Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
+        <Button onClick={toggleTimeoutUpdate}>
+          Timeout Update {props.timeoutUpdateEnabled ? 'On' : 'Off'}
         </Button>
-          <Button onClick={this.props.shuffleArray}>Shuffle Array</Button>
+        <Button onClick={props.shuffleArray}>Shuffle Array</Button>
         <Spacer />
       </Toolbar>
       <div>
@@ -138,18 +147,6 @@ class DemoApp extends React.Component<Props & RouteComponentProps> {
       </div>
     </div>
   );
-  }
-
-  toggleTimeoutUpdate = () => {
-    const enabled = !this.props.timeoutUpdateEnabled;
-    this.props.toggleTimeoutUpdate(enabled);
-
-    if (enabled) {
-      this.timeout = window.setInterval(this.props.timeoutUpdate, 1000);
-    } else {
-      clearTimeout(this.timeout);
-    }
-  };
 }
 
 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);

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);
+}

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>

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",

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,11 +141,50 @@ 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);
+  const toggleExtension = () => {
+    const options = getOptions(location);
+
+    window.location.href = buildUrl({
+      ...options,
+      useExtension: !options.useExtension,
+    });
+  };
+
+  const toggleImmutableSupport = () => {
+    const options = getOptions(location);
+
+    navigate(
+      buildUrl({ ...options, supportImmutable: !options.supportImmutable })
+    );
+  };
+
+  const toggleTheme = () => {
+    const options = getOptions(location);
+
+    navigate(buildUrl({ ...options, dark: !options.dark }));
+  };
+
+  const setTheme = (options: Options, theme: string) => {
+    navigate(buildUrl({ ...options, theme }));
+  };
+
+  const toggleTimeoutUpdate = () => {
+    const enabled = !props.timeoutUpdateEnabled;
+    props.toggleTimeoutUpdate(enabled);
+
+    if (enabled) {
+      timeout.current = window.setInterval(props.timeoutUpdate, 1000);
+    } else {
+      clearTimeout(timeout.current);
+    }
+  };
+
+  const options = getOptions(location);
 
   return (
     <div style={styles.wrapper}>
@@ -169,7 +208,7 @@ class DemoApp extends React.Component<Props & RouteComponentProps> {
                   <FormControl
                     as="select"
                     onChange={(event) =>
-                        this.setTheme(options, event.currentTarget.value)
+                      setTheme(options, event.currentTarget.value)
                     }
                   >
                     {themeOptions.map((theme) => (
@@ -181,7 +220,7 @@ class DemoApp extends React.Component<Props & RouteComponentProps> {
                       />
                     ))}
                   </FormControl>
-                    <a onClick={this.toggleTheme} style={styles.link}>
+                  <a onClick={toggleTheme} style={styles.link}>
                     {options.dark ? 'Light theme' : 'Dark theme'}
                   </a>
                 </InputGroup>
@@ -192,113 +231,71 @@ class DemoApp extends React.Component<Props & RouteComponentProps> {
       </div>
       <div style={styles.content}>
         <div style={styles.buttons}>
-            <Button onClick={this.props.increment} style={styles.button}>
+          <Button onClick={props.increment} style={styles.button}>
             Increment
           </Button>
-            <Button onClick={this.props.push} style={styles.button}>
+          <Button onClick={props.push} style={styles.button}>
             Push
           </Button>
-            <Button onClick={this.props.pop} style={styles.button}>
+          <Button onClick={props.pop} style={styles.button}>
             Pop
           </Button>
-            <Button onClick={this.props.replace} style={styles.button}>
+          <Button onClick={props.replace} style={styles.button}>
             Replace
           </Button>
-            <Button onClick={this.props.changeNested} style={styles.button}>
+          <Button onClick={props.changeNested} style={styles.button}>
             Change Nested
           </Button>
-            <Button onClick={this.props.pushHugeArray} style={styles.button}>
+          <Button onClick={props.pushHugeArray} style={styles.button}>
             Push Huge Array
           </Button>
-            <Button onClick={this.props.addHugeObject} style={styles.button}>
+          <Button onClick={props.addHugeObject} style={styles.button}>
             Add Huge Object
           </Button>
-            <Button onClick={this.props.addIterator} style={styles.button}>
+          <Button onClick={props.addIterator} style={styles.button}>
             Add Iterator
           </Button>
-            <Button onClick={this.props.addRecursive} style={styles.button}>
+          <Button onClick={props.addRecursive} style={styles.button}>
             Add Recursive
           </Button>
-            <Button onClick={this.props.addNativeMap} style={styles.button}>
+          <Button onClick={props.addNativeMap} style={styles.button}>
             Add Native Map
           </Button>
-            <Button onClick={this.props.addImmutableMap} style={styles.button}>
+          <Button onClick={props.addImmutableMap} style={styles.button}>
             Add Immutable Map
           </Button>
-            <Button
-              onClick={this.props.changeImmutableNested}
-              style={styles.button}
-            >
+          <Button onClick={props.changeImmutableNested} style={styles.button}>
             Change Immutable Nested
           </Button>
-            <Button onClick={this.props.hugePayload} style={styles.button}>
+          <Button onClick={props.hugePayload} style={styles.button}>
             Huge Payload
           </Button>
-            <Button onClick={this.props.addFunction} style={styles.button}>
+          <Button onClick={props.addFunction} style={styles.button}>
             Add Function
           </Button>
-            <Button onClick={this.props.addSymbol} style={styles.button}>
+          <Button onClick={props.addSymbol} style={styles.button}>
             Add Symbol
           </Button>
-            <Button onClick={this.toggleTimeoutUpdate} style={styles.button}>
-              Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
+          <Button onClick={toggleTimeoutUpdate} style={styles.button}>
+            Timeout Update {props.timeoutUpdateEnabled ? 'On' : 'Off'}
           </Button>
-            <Button onClick={this.props.shuffleArray} style={styles.button}>
+          <Button onClick={props.shuffleArray} style={styles.button}>
             Shuffle Array
           </Button>
         </div>
       </div>
       <div style={styles.links}>
-          <a onClick={this.toggleExtension} style={styles.link}>
+        <a onClick={toggleExtension} style={styles.link}>
           {(options.useExtension ? 'Disable' : 'Enable') +
             ' Chrome Extension (will reload this page)'}
         </a>
-          <a onClick={this.toggleImmutableSupport} style={styles.link}>
+        <a onClick={toggleImmutableSupport} style={styles.link}>
           {(options.supportImmutable ? 'Disable' : 'Enable') +
             ' Full Immutable Support'}
         </a>
       </div>
     </div>
   );
-  }
-
-  toggleExtension = () => {
-    const options = getOptions(this.props.location);
-
-    window.location.href = buildUrl({
-      ...options,
-      useExtension: !options.useExtension,
-    });
-  };
-
-  toggleImmutableSupport = () => {
-    const options = getOptions(this.props.location);
-
-    this.props.history.push(
-      buildUrl({ ...options, supportImmutable: !options.supportImmutable })
-    );
-  };
-
-  toggleTheme = () => {
-    const options = getOptions(this.props.location);
-
-    this.props.history.push(buildUrl({ ...options, dark: !options.dark }));
-  };
-
-  setTheme = (options: Options, theme: string) => {
-    this.props.history.push(buildUrl({ ...options, theme }));
-  };
-
-  toggleTimeoutUpdate = () => {
-    const enabled = !this.props.timeoutUpdateEnabled;
-    this.props.toggleTimeoutUpdate(enabled);
-
-    if (enabled) {
-      this.timeout = window.setInterval(this.props.timeoutUpdate, 1000);
-    } else {
-      clearTimeout(this.timeout);
-    }
-  };
 }
 
 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);

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);
+}

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>,

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",

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"
               >

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>
+          <Routes>
+            <Route path="posts/:id" element={<PostDetail />} />
+            <Route
+              index
+              element={
                 <Center h="200px">
                   <Heading size="md">Select a post to edit!</Heading>
                 </Center>
-            </Route>
-          </Switch>
+              }
+            />
+          </Routes>
         </Box>
       </Flex>
     </Box>

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>
   );
 }

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'}