build: ugprade deps

babel.config.js

@@ -15,7 +15,9 @@ const presets = [
 ];
 
 module.exports = api => {
+  // https://babeljs.io/docs/en/config-files#apicache
   api.cache.using(() => process.env.NODE_ENV);
+  // https://babeljs.io/docs/en/config-files#apienv
   const isDev = api.env('development');
   const plugins = [
     [

package.json

@@ -48,11 +48,12 @@
     "memoize-one": "^5.1.1",
     "modern-normalize": "^0.6.0",
     "prop-types": "^15.5.10",
-    "react": "^0.0.0-experimental-f42431abe",
-    "react-dom": "^0.0.0-experimental-f42431abe",
+    "react": "0.0.0-experimental-241c4467e",
+    "react-dom": "0.0.0-experimental-241c4467e",
     "react-feather": "^2.0.3",
     "react-modal": "^3.11.1",
-    "react-router-dom": "^5.1.2",
+    "react-router": "^6.0.0-alpha.1",
+    "react-router-dom": "^6.0.0-alpha.1",
     "react-table": "7.0.0-rc.15",
     "react-tabs": "^3.1.0",
     "react-window": "^1.8.5",
@@ -77,14 +78,14 @@
     "babel-loader": "^8.0.5",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "3.4.1",
+    "css-loader": "^3.4.2",
     "cssnano": "^4.1.7",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.0.2",
     "eslint-import-resolver-webpack": "^0.12.0",
-    "eslint-plugin-flowtype": "4.5.3",
+    "eslint-plugin-flowtype": "^4.6.0",
     "eslint-plugin-import": "^2.18.0",
-    "eslint-plugin-jest": "23.3.0",
+    "eslint-plugin-jest": "^23.6.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^2.2.0",
@@ -100,7 +101,7 @@
     "postcss-nested": "^4.2.0",
     "postcss-simple-vars": "^5.0.2",
     "prettier": "^1.17.1",
-    "react-refresh": "^0.0.0-experimental-f42431abe",
+    "react-refresh": "0.0.0-experimental-241c4467e",
     "resize-observer-polyfill": "^1.5.1",
     "style-loader": "^1.1.2",
     "terser-webpack-plugin": "^2.3.1",

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>

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