build: ugprade deps

2 files changed, 17 insertions, 14 deletions

diff --git a/src/components/Root.js b/src/components/Root.js
index 27d8f26..7303ee7 100644
--- a/src/components/Root.js
+++ b/src/components/Root.js
@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 // import { Provider } from '../misc/store';
 import StateProvider from './StateProvider';
-import { HashRouter as Router, Route } from 'react-router-dom';
+import { HashRouter as Router, Route, Routes } from 'react-router-dom';
 import Loading2 from './Loading2';
 import ErrorBoundary from './ErrorBoundary';
 import SideBar from './SideBar';
@@ -34,13 +34,13 @@ const Rules = React.lazy(() =>
 );
 
 const routes = [
-  ['home', '/', Home],
-  ['connections', '/connections', Connections],
-  ['configs', '/configs', Config],
-  ['logs', '/logs', Logs],
-  ['proxies', '/proxies', Proxies],
-  ['rules', '/rules', Rules],
-  __DEV__ ? ['style', '/style', StyleGuide] : false
+  ['home', '/', <Home />],
+  ['connections', '/connections', <Connections />],
+  ['configs', '/configs', <Config />],
+  ['logs', '/logs', <Logs />],
+  ['proxies', '/proxies', <Proxies />],
+  ['rules', '/rules', <Rules />],
+  __DEV__ ? ['style', '/style', <StyleGuide />] : false
 ].filter(Boolean);
 
 const Root = () => (
@@ -49,12 +49,14 @@ const Root = () => (
       <Router>
         <div className={s0.app}>
           <APIDiscovery />
-          <Route path="/" render={props => <SideBar {...props} />} />
+          <Route path="/" element={<SideBar />} />
           <div className={s0.content}>
             <Suspense fallback={<Loading2 />}>
-              {routes.map(([key, path, component]) => (
-                <Route exact key={key} path={path} component={component} />
-              ))}
+              <Routes>
+                {routes.map(([key, path, element]) => (
+                  <Route key={key} path={path} element={element} />
+                ))}
+              </Routes>
             </Suspense>
           </div>
         </div>
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
index 2b68b85..9bee00e 100644
--- a/src/components/SideBar.js
+++ b/src/components/SideBar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import {
   Moon,
   Command,
@@ -86,7 +86,8 @@ const pages = [
   }
 ];
 
-function SideBar({ dispatch, location }) {
+function SideBar({ dispatch }) {
+  const location = useLocation();
   const switchThemeHooked = useCallback(() => {
     dispatch(switchTheme());
   }, [dispatch]);