Upgrade: reacr-router v6

package.json

@@ -25,33 +25,33 @@
         "contributors:generate": "all-contributors generate"
     },
     "devDependencies": {
-        "@babel/eslint-parser": "^7.16.0",
+        "@babel/eslint-parser": "^7.16.3",
         "@types/lodash-es": "^4.17.5",
-        "@types/node": "^16.11.6",
+        "@types/node": "^16.11.7",
         "@types/react": "^17.0.34",
         "@types/react-dom": "^17.0.11",
         "@types/react-router-dom": "^5.3.2",
-        "@types/react-table": "^7.7.7",
+        "@types/react-table": "^7.7.8",
         "@types/react-virtualized-auto-sizer": "^1.0.1",
         "@types/react-window": "^1.8.5",
-        "@typescript-eslint/eslint-plugin": "^5.3.0",
+        "@typescript-eslint/eslint-plugin": "^5.3.1",
-        "@typescript-eslint/parser": "^5.3.0",
+        "@typescript-eslint/parser": "^5.3.1",
-        "@vitejs/plugin-react": "^1.0.7",
+        "@vitejs/plugin-react": "^1.0.9",
-        "eslint": "^8.1.0",
+        "eslint": "^8.2.0",
-        "eslint-config-airbnb": "^18.2.1",
+        "eslint-config-airbnb": "^19.0.0",
-        "eslint-config-airbnb-typescript": "^14.0.1",
+        "eslint-config-airbnb-typescript": "^15.0.0",
         "eslint-config-standard-with-typescript": "^21.0.1",
         "eslint-import-resolver-typescript": "^2.5.0",
-        "eslint-plugin-import": "^2.25.2",
+        "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^5.1.1",
-        "eslint-plugin-react-hooks": "^4.2.0",
+        "eslint-plugin-react-hooks": "^4.3.0",
         "sass": "^1.43.4",
-        "type-fest": "^2.5.2",
+        "type-fest": "^2.5.3",
         "typescript": "^4.4.4",
-        "vite": "^2.6.13",
+        "vite": "^2.6.14",
-        "vite-plugin-pwa": "^0.11.3",
+        "vite-plugin-pwa": "^0.11.5",
-        "vite-plugin-windicss": "^1.4.12",
+        "vite-plugin-windicss": "^1.5.1",
         "vite-tsconfig-paths": "^3.3.17",
         "windicss": "^3.2.1"
     },
@@ -61,12 +61,12 @@
         "dayjs": "^1.10.7",
         "eventemitter3": "^4.0.7",
         "immer": "^9.0.6",
-        "jotai": "^1.4.2",
+        "jotai": "^1.4.3",
         "lodash-es": "^4.17.21",
         "neverthrow": "^4.3.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-router-dom": "^5.3.0",
+        "react-router-dom": "^6.0.2",
         "react-table": "^7.7.0",
         "react-use": "^17.3.1",
         "react-virtualized-auto-sizer": "^1.0.6",

src/containers/App.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames'
-import { Route, Redirect, Switch } from 'react-router-dom'
+import { Route, Navigate, Routes } from 'react-router-dom'
 
 // import Overview from '@containers/Overview'
 import Connections from '@containers/Connections'
@@ -20,25 +20,25 @@ export default function App () {
 
     const routes = [
     // { path: '/', name: 'Overview', component: Overview, exact: true },
-        { path: '/proxies', name: 'Proxies', component: Proxies },
+        { path: '/proxies', name: 'Proxies', element: <Proxies /> },
-        { path: '/logs', name: 'Logs', component: Logs },
+        { path: '/logs', name: 'Logs', element: <Logs /> },
-        { path: '/rules', name: 'Rules', component: Rules, noMobile: true },
+        { path: '/rules', name: 'Rules', element: <Rules />, noMobile: true },
-        { path: '/connections', name: 'Connections', component: Connections, noMobile: true },
+        { path: '/connections', name: 'Connections', element: <Connections />, noMobile: true },
-        { path: '/settings', name: 'Settings', component: Settings },
+        { path: '/settings', name: 'Settings', element: <Settings /> },
     ]
 
     return (
         <div className={classnames('app', { 'not-clashx': !isClashX() })}>
             <SideBar routes={routes} />
             <div className="page-container">
-                <Switch>
+                <Routes>
-                    <Route exact path="/" component={() => <Redirect to="/proxies"/>} />
+                    <Route path="/" element={<Navigate to="/proxies" replace />} />
                     {
                         routes.map(
-                            route => <Route exact={false} path={route.path} key={route.path} component={route.component} />,
+                            route => <Route path={route.path} key={route.path} element={route.element} />,
                         )
                     }
-                </Switch>
+                </Routes>
             </div>
             <ExternalControllerModal />
         </div>

src/containers/Sidebar/index.tsx

@@ -11,7 +11,6 @@ interface SidebarProps {
         path: string
         name: string
         noMobile?: boolean
-        exact?: boolean
     }>
 }
 
@@ -23,9 +22,9 @@ export default function Sidebar (props: SidebarProps) {
     const { t } = translation('SideBar')
 
     const navlinks = routes.map(
-        ({ path, name, exact, noMobile }) => (
+        ({ path, name, noMobile }) => (
             <li className={classnames('item', { 'no-mobile': noMobile })} key={name}>
-                <NavLink to={path} activeClassName="active" exact={!!exact}>
+                <NavLink to={path} className={({ isActive }) => classnames({ active: isActive })}>
                     { t(name as keyof typeof Language[Lang]['SideBar']) }
                 </NavLink>
             </li>