Repository: provectus/kafka-ui
Issue: Upgrade react-router-dom to v6
Labels: scope/frontend
type/refactoring
status/accepted
type/chore

### Is your proposal related to a problem?
App uses legacy version of react-router-dom

### Describe the solution you'd like
Please follow instruction from https://reactrouter.com/docs/en/v6/upgrading/v5


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/package-lock.json b/kafka-ui-react-app/package-lock.json
index afff9bf5238..b177a59b33d 100644
--- a/kafka-ui-react-app/package-lock.json
+++ b/kafka-ui-react-app/package-lock.json
@@ -36,7 +36,7 @@
         "react-multi-select-component": "^4.0.6",
         "react-redux": "^7.2.6",
         "react-router": "^5.2.0",
-        "react-router-dom": "^5.3.1",
+        "react-router-dom": "^6.3.0",
         "redux": "^4.1.1",
         "redux-thunk": "^2.3.0",
         "sass": "^1.43.4",
@@ -16158,7 +16158,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
       "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.7.6"
       }
@@ -24876,53 +24875,27 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.1.tgz",
-      "integrity": "sha512-f0pj/gMAbv9e8gahTmCEY20oFhxhrmHwYeIwH5EO5xu0qme+wXtsdB8YfUOAZzUz4VaXmb58m3ceiLtjMhqYmQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
       "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.1",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
       },
       "peerDependencies": {
-        "react": ">=15"
-      }
-    },
-    "node_modules/react-router-dom/node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "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"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
     "node_modules/react-router-dom/node_modules/react-router": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.1.tgz",
-      "integrity": "sha512-v+zwjqb7bakqgF+wMVKlAPTca/cEmPOvQ9zt7gpSNyPXau1+0qvuYZ5BWzzNDP1y6s15zDwgb9rPN63+SIniRQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
       "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
-        "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"
+        "history": "^5.2.0"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
       }
     },
     "node_modules/react-router/node_modules/history": {
@@ -40798,7 +40771,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
       "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.6"
       }
@@ -47342,47 +47314,20 @@
       }
     },
     "react-router-dom": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.1.tgz",
-      "integrity": "sha512-f0pj/gMAbv9e8gahTmCEY20oFhxhrmHwYeIwH5EO5xu0qme+wXtsdB8YfUOAZzUz4VaXmb58m3ceiLtjMhqYmQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
       "requires": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.1",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
       },
       "dependencies": {
-        "history": {
-          "version": "4.10.1",
-          "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-          "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-          "requires": {
-            "@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"
-          }
-        },
         "react-router": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.1.tgz",
-          "integrity": "sha512-v+zwjqb7bakqgF+wMVKlAPTca/cEmPOvQ9zt7gpSNyPXau1+0qvuYZ5BWzzNDP1y6s15zDwgb9rPN63+SIniRQ==",
-          "requires": {
-            "@babel/runtime": "^7.12.13",
-            "history": "^4.9.0",
-            "hoist-non-react-statics": "^3.1.0",
-            "loose-envify": "^1.3.1",
-            "mini-create-react-context": "^0.4.0",
-            "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"
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+          "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+          "requires": {
+            "history": "^5.2.0"
           }
         }
       }
diff --git a/kafka-ui-react-app/package.json b/kafka-ui-react-app/package.json
index 9c7c6490329..7f01e4a5e01 100644
--- a/kafka-ui-react-app/package.json
+++ b/kafka-ui-react-app/package.json
@@ -32,7 +32,7 @@
     "react-multi-select-component": "^4.0.6",
     "react-redux": "^7.2.6",
     "react-router": "^5.2.0",
-    "react-router-dom": "^5.3.1",
+    "react-router-dom": "^6.3.0",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
     "sass": "^1.43.4",


Test patch: