update react-router-dom to v6

don't need v5-compat
2025-10-17 15:03:02 +00:00 · 2024-03-06 10:10:04 +01:00
parent f4f30db334
commit 38dc781271
8 changed files with 51 additions and 172 deletions
--- a/jsx/package-lock.json
+++ b/jsx/package-lock.json
@@ -19,8 +19,7 @@
        "react-icons": "^4.8.0",
        "react-multi-select-component": "^4.3.4",
        "react-redux": "^7.2.8",
-        "react-router-dom": "^5.3.4",
-        "react-router-dom-v5-compat": "^6.22.2",
+        "react-router-dom": "^6.22.2",
        "recompose": "npm:react-recompose@^0.33.0",
        "redux": "^4.2.1",
        "regenerator-runtime": "^0.13.11"
@@ -7845,17 +7844,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "license": "MIT",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
-    "node_modules/path-to-regexp/node_modules/isarray": {
-      "version": "0.0.1",
-      "license": "MIT"
-    },
    "node_modules/picocolors": {
      "version": "1.0.0",
      "dev": true,
@@ -8324,57 +8312,6 @@
      "license": "MIT"
    },
    "node_modules/react-router": {
-      "version": "5.3.4",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=15"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "5.3.4",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.4",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=15"
-      }
-    },
-    "node_modules/react-router-dom-v5-compat": {
-      "version": "6.22.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.22.2.tgz",
-      "integrity": "sha512-d7Bo6q3lRwUqtrmuULkpu3NECk+nOT3eNz6PnR5lGIWi0NN7gu6i281cqe3Cfu8v0MmNE41D0g/JdKJhfE7Brw==",
-      "dependencies": {
-        "history": "^5.3.0",
-        "react-router": "6.22.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8",
-        "react-router-dom": "4 || 5"
-      }
-    },
-    "node_modules/react-router-dom-v5-compat/node_modules/react-router": {
      "version": "6.22.2",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz",
      "integrity": "sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==",
@@ -8388,28 +8325,20 @@
        "react": ">=16.8"
      }
    },
-    "node_modules/react-router-dom/node_modules/history": {
-      "version": "4.10.1",
-      "license": "MIT",
+    "node_modules/react-router-dom": {
+      "version": "6.22.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.2.tgz",
+      "integrity": "sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==",
      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
+        "@remix-run/router": "1.15.2",
+        "react-router": "6.22.2"
      },
-    "node_modules/react-router/node_modules/history": {
-      "version": "4.10.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
      }
    },
    "node_modules/react-transition-group": {
@@ -8633,10 +8562,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/resolve-pathname": {
-      "version": "3.0.0",
-      "license": "MIT"
-    },
    "node_modules/resolve.exports": {
      "version": "2.0.2",
      "dev": true,
@@ -9449,14 +9374,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/tiny-invariant": {
-      "version": "1.3.1",
-      "license": "MIT"
-    },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "license": "MIT"
-    },
    "node_modules/tmpl": {
      "version": "1.0.5",
      "dev": true,
@@ -9726,10 +9643,6 @@
        "node": ">=10.12.0"
      }
    },
-    "node_modules/value-equal": {
-      "version": "1.0.1",
-      "license": "MIT"
-    },
    "node_modules/vary": {
      "version": "1.1.2",
      "dev": true,
--- a/jsx/package.json
+++ b/jsx/package.json
@@ -39,8 +39,7 @@
    "react-icons": "^4.8.0",
    "react-multi-select-component": "^4.3.4",
    "react-redux": "^7.2.8",
-    "react-router-dom": "^5.3.4",
-    "react-router-dom-v5-compat": "^6.22.2",
+    "react-router-dom": "^6.22.2",
    "recompose": "npm:react-recompose@^0.33.0",
    "redux": "^4.2.1",
    "regenerator-runtime": "^0.13.11"
--- a/jsx/src/App.jsx
+++ b/jsx/src/App.jsx
@@ -5,7 +5,7 @@ import { createStore } from "redux";
 import { compose } from "recompose";
 import { initialState, reducers } from "./Store";
 import withAPI from "./util/withAPI";
-import { HashRouter, Switch, Route } from "react-router-dom";
+import { HashRouter, Routes, Route } from "react-router-dom";

 import ServerDashboard from "./components/ServerDashboard/ServerDashboard";
 import Groups from "./components/Groups/Groups";
@@ -13,7 +13,6 @@ import GroupEdit from "./components/GroupEdit/GroupEdit";
 import CreateGroup from "./components/CreateGroup/CreateGroup";
 import AddUser from "./components/AddUser/AddUser";
 import EditUser from "./components/EditUser/EditUser";
-import { CompatRouter } from "react-router-dom-v5-compat";

 import "./style/root.css";

@@ -24,40 +23,17 @@ const App = () => {
    <div className="resets">
      <Provider store={store}>
        <HashRouter>
-          <CompatRouter>
-            <Switch>
+          <Routes>
+            <Route path="/" element={compose(withAPI)(ServerDashboard)()} />
+            <Route path="/groups" element={compose(withAPI)(Groups)()} />
+            <Route path="/group-edit" element={compose(withAPI)(GroupEdit)()} />
            <Route
-                exact
-                path="/"
-                component={compose(withAPI)(ServerDashboard)}
-              />
-              <Route
-                exact
-                path="/groups"
-                component={compose(withAPI)(Groups)}
-              />
-              <Route
-                exact
-                path="/group-edit"
-                component={compose(withAPI)(GroupEdit)}
-              />
-              <Route
-                exact
              path="/create-group"
-                component={compose(withAPI)(CreateGroup)}
+              element={compose(withAPI)(CreateGroup)()}
            />
-              <Route
-                exact
-                path="/add-users"
-                component={compose(withAPI)(AddUser)}
-              />
-              <Route
-                exact
-                path="/edit-user"
-                component={compose(withAPI)(EditUser)}
-              />
-            </Switch>
-          </CompatRouter>
+            <Route path="/add-users" element={compose(withAPI)(AddUser)()} />
+            <Route path="/edit-user" element={compose(withAPI)(EditUser)()} />
+          </Routes>
        </HashRouter>
      </Provider>
    </div>
--- a/jsx/src/components/GroupEdit/GroupEdit.test.jsx
+++ b/jsx/src/components/GroupEdit/GroupEdit.test.jsx
@@ -6,7 +6,6 @@ import userEvent from "@testing-library/user-event";
 import { Provider, useSelector } from "react-redux";
 import { createStore } from "redux";
 import { HashRouter } from "react-router-dom";
-import { CompatRouter } from "react-router-dom-v5-compat";
 // eslint-disable-next-line
 import regeneratorRuntime from "regenerator-runtime";

@@ -28,7 +27,6 @@ var okPacket = new Promise((resolve) => resolve(true));
 var groupEditJsx = (callbackSpy) => (
  <Provider store={createStore(() => {}, {})}>
    <HashRouter>
-      <CompatRouter>
      <GroupEdit
        location={{
          state: {
@@ -43,7 +41,6 @@ var groupEditJsx = (callbackSpy) => (
        updateGroups={callbackSpy}
        validateUser={jest.fn().mockImplementation(() => okPacket)}
      />
-      </CompatRouter>
    </HashRouter>
  </Provider>
 );
--- a/jsx/src/components/Groups/Groups.test.js
+++ b/jsx/src/components/Groups/Groups.test.js
@@ -4,8 +4,7 @@ import { act } from "react-dom/test-utils";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { Provider, useDispatch, useSelector } from "react-redux";
 import { createStore } from "redux";
-import { HashRouter } from "react-router-dom";
-import { CompatRouter, useSearchParams } from "react-router-dom-v5-compat";
+import { HashRouter, useSearchParams } from "react-router-dom";
 // eslint-disable-next-line
 import regeneratorRuntime from "regenerator-runtime";

@@ -17,8 +16,8 @@ jest.mock("react-redux", () => ({
  useSelector: jest.fn(),
 }));

-jest.mock("react-router-dom-v5-compat", () => ({
-  ...jest.requireActual("react-router-dom-v5-compat"),
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
  useSearchParams: jest.fn(),
 }));

@@ -28,9 +27,7 @@ var mockAsync = () =>
 var groupsJsx = (callbackSpy) => (
  <Provider store={createStore(mockReducers, mockAppState())}>
    <HashRouter>
-      <CompatRouter>
      <Groups location={{ search: "0" }} updateGroups={callbackSpy} />
-      </CompatRouter>
    </HashRouter>
  </Provider>
 );
--- a/jsx/src/components/ServerDashboard/ServerDashboard.jsx
+++ b/jsx/src/components/ServerDashboard/ServerDashboard.jsx
@@ -14,10 +14,7 @@ import {
 } from "react-bootstrap";
 import ReactObjectTableViewer from "../ReactObjectTableViewer/ReactObjectTableViewer";

-import { Link } from "react-router-dom";
-// react-router-dom v6 API
-// should be able to upgrade to v6 someday
-import { useSearchParams } from "react-router-dom-v5-compat";
+import { Link, useSearchParams } from "react-router-dom";
 import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";

 import "./server-dashboard.css";
--- a/jsx/src/components/ServerDashboard/ServerDashboard.test.js
+++ b/jsx/src/components/ServerDashboard/ServerDashboard.test.js
@@ -9,8 +9,8 @@ import {
  getByText,
  getAllByRole,
 } from "@testing-library/react";
-import { HashRouter, Switch } from "react-router-dom";
-import { CompatRouter, useSearchParams } from "react-router-dom-v5-compat";
+import { HashRouter, Routes, Route, useSearchParams } from "react-router-dom";
+// import { CompatRouter,  } from "react-router-dom-v5-compat";
 import { Provider, useSelector } from "react-redux";
 import { createStore } from "redux";
 // eslint-disable-next-line
@@ -23,8 +23,8 @@ jest.mock("react-redux", () => ({
  ...jest.requireActual("react-redux"),
  useSelector: jest.fn(),
 }));
-jest.mock("react-router-dom-v5-compat", () => ({
-  ...jest.requireActual("react-router-dom-v5-compat"),
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
  useSearchParams: jest.fn(),
 }));

--- a/jsx/src/util/paginationParams.js
+++ b/jsx/src/util/paginationParams.js
@@ -1,5 +1,5 @@
 import { debounce } from "lodash";
-import { useSearchParams } from "react-router-dom-v5-compat";
+import { useSearchParams } from "react-router-dom";

 export const usePaginationParams = () => {
  // get offset, limit, name filter from URL