Update to react-router 7

CHANGELOG.md

@@ -4,6 +4,25 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+### Added
+* *Nothing*
+
+### Changed
+* Update to `react-router` 7.0
+* Update to `@shlinkio/shlink-frontend-kit` 0.7.0
+* Update to `@shlinkio/shlink-web-component` 0.12.0
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [4.3.0] - 2024-11-30
 ### Added
 * [#1360](https://github.com/shlinkio/shlink-web-client/issues/1360) Added ability for server IDs to be generated based on the server name and URL, instead of generating a random UUID.

package-lock.json

@@ -16,9 +16,9 @@
         "@json2csv/plainjs": "^7.0.6",
         "@reduxjs/toolkit": "^2.4.0",
         "@shlinkio/data-manipulation": "^1.0.3",
-        "@shlinkio/shlink-frontend-kit": "^0.6.0",
+        "@shlinkio/shlink-frontend-kit": "^0.7.0",
         "@shlinkio/shlink-js-sdk": "^1.3.0",
-        "@shlinkio/shlink-web-component": "^0.11.0",
+        "@shlinkio/shlink-web-component": "^0.12.0",
         "bootstrap": "5.2.3",
         "bottlejs": "^2.0.1",
         "clsx": "^2.1.1",
@@ -29,7 +29,7 @@
         "react-dom": "^18.3.1",
         "react-external-link": "^2.4.0",
         "react-redux": "^9.1.2",
-        "react-router-dom": "^6.28.0",
+        "react-router": "^7.0.2",
         "reactstrap": "^9.2.3",
         "redux-localstorage-simple": "^2.5.1",
         "workbox-core": "^7.3.0",
@@ -2911,14 +2911,6 @@
         }
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
-      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@rollup/plugin-node-resolve": {
       "version": "15.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.0.tgz",
@@ -3272,9 +3264,9 @@
       }
     },
     "node_modules/@shlinkio/shlink-frontend-kit": {
-      "version": "0.6.0",
+      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.7.0.tgz",
-      "integrity": "sha512-nfROKrm9tLDRPzUIxFfl3oFe1MIV0zgjFHT/ImwyskALeh/WHQLXII5eVBI8sd/SaeJFLWJvQA8GPtvU/WBYRw==",
+      "integrity": "sha512-FJyO71B+RCqoqEUT/KrySgJYhaA/33ddTm4UtQYw129TLrpXOSDAg7JCKNTHzL4yTwh17gXeOG7mi0YAiL6qng==",
       "license": "MIT",
       "dependencies": {
         "clsx": "^2.1.1"
@@ -3285,7 +3277,7 @@
         "@fortawesome/react-fontawesome": "^0.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.14.2",
+        "react-router": "^7.0.2",
         "reactstrap": "^9.2.0"
       }
     },
@@ -3295,9 +3287,9 @@
       "integrity": "sha512-apkKzyAVY2cD0MUOZTtu3wO3sHT2dncE8KTgYFj+HKIbf/F455W32F2VydwM0R3KFH1P5X7mNfLn0m8HPPTiBA=="
     },
     "node_modules/@shlinkio/shlink-web-component": {
-      "version": "0.11.0",
+      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.12.0.tgz",
-      "integrity": "sha512-yroB9HYQxvL+WjHJQR4m3TDGtHjILSQLMSnWPeyzyL5W7+Yn+3inVj/rwyYS5eMwlNGi6NAOMkEyhcfytUsIAA==",
+      "integrity": "sha512-c9gsyWxwletxDyzkszXxBYUn00dhL7v34oqmEIpZKWXScKboONYYssF1UOBWCQg0NssZjdQ4vorMQc/Dl59wVw==",
       "license": "MIT",
       "dependencies": {
         "@formkit/drag-and-drop": "^0.0.38",
@@ -3310,11 +3302,11 @@
         "date-fns": "^4.1.0",
         "event-source-polyfill": "^1.0.31",
         "leaflet": "^1.9.4",
-        "react-external-link": "^2.3.1",
+        "react-external-link": "^2.4.0",
         "react-leaflet": "^4.2.1",
         "react-swipeable": "^7.0.2",
         "react-tag-autocomplete": "^7.4.0",
-        "recharts": "^2.13.3"
+        "recharts": "^2.14.1"
       },
       "peerDependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
@@ -3323,12 +3315,12 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@reduxjs/toolkit": "^2.0.1",
-        "@shlinkio/shlink-frontend-kit": "^0.6.0",
+        "@shlinkio/shlink-frontend-kit": "^0.7.0",
         "@shlinkio/shlink-js-sdk": "^1.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^9.0.1",
-        "react-router-dom": "^6.20.1",
+        "react-router": "^7.0.2",
         "reactstrap": "^9.2.0"
       },
       "peerDependenciesMeta": {
@@ -3589,6 +3581,12 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -4812,6 +4810,15 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.39.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.39.0.tgz",
@@ -8474,39 +8481,33 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.28.0",
+      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz",
-      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+      "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.21.0"
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8"
+        "react": ">=18",
-      }
+        "react-dom": ">=18"
-    },
-    "node_modules/react-router-dom": {
-      "version": "6.28.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
-      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
-      "dependencies": {
-        "@remix-run/router": "1.21.0",
-        "react-router": "6.28.0"
       },
-      "engines": {
+      "peerDependenciesMeta": {
-        "node": ">=14.0.0"
+        "react-dom": {
-      },
+          "optional": true
-      "peerDependencies": {
+        }
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
       }
     },
     "node_modules/react-smooth": {
-      "version": "4.0.1",
+      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.3.tgz",
-      "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
+      "integrity": "sha512-PyxIrra8WZWrMRFcCiJsZ+JqFaxEINAt+v/w++wQKQlmO99Eh3+JTLeKApdTsLX2roBdWYXqPsaS8sO4UmdzIg==",
       "license": "MIT",
       "dependencies": {
         "fast-equals": "^5.0.1",
@@ -8644,9 +8645,9 @@
       }
     },
     "node_modules/recharts": {
-      "version": "2.13.3",
+      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.3.tgz",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.14.1.tgz",
-      "integrity": "sha512-YDZ9dOfK9t3ycwxgKbrnDlRC4BHdjlY73fet3a0C1+qGMjXVZe6+VXmpOIIhzkje5MMEL8AN4hLIe4AMskBzlA==",
+      "integrity": "sha512-xtWulflkA+/xu4/QClBdtZYN30dbvTHjxjkh5XTMrH/CQ3WGDDPHHa/LLKCbgoqz0z3UaSH2/blV1i6VNMeh1g==",
       "license": "MIT",
       "dependencies": {
         "clsx": "^2.0.0",
@@ -9063,6 +9064,12 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -10854,6 +10861,12 @@
         "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
       }
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -13779,11 +13792,6 @@
         "reselect": "^5.1.0"
       }
     },
-    "@remix-run/router": {
-      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
-      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA=="
-    },
     "@rollup/plugin-node-resolve": {
       "version": "15.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.0.tgz",
@@ -13966,9 +13974,9 @@
       "requires": {}
     },
     "@shlinkio/shlink-frontend-kit": {
-      "version": "0.6.0",
+      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.7.0.tgz",
-      "integrity": "sha512-nfROKrm9tLDRPzUIxFfl3oFe1MIV0zgjFHT/ImwyskALeh/WHQLXII5eVBI8sd/SaeJFLWJvQA8GPtvU/WBYRw==",
+      "integrity": "sha512-FJyO71B+RCqoqEUT/KrySgJYhaA/33ddTm4UtQYw129TLrpXOSDAg7JCKNTHzL4yTwh17gXeOG7mi0YAiL6qng==",
       "requires": {
         "clsx": "^2.1.1"
       }
@@ -13979,9 +13987,9 @@
       "integrity": "sha512-apkKzyAVY2cD0MUOZTtu3wO3sHT2dncE8KTgYFj+HKIbf/F455W32F2VydwM0R3KFH1P5X7mNfLn0m8HPPTiBA=="
     },
     "@shlinkio/shlink-web-component": {
-      "version": "0.11.0",
+      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.12.0.tgz",
-      "integrity": "sha512-yroB9HYQxvL+WjHJQR4m3TDGtHjILSQLMSnWPeyzyL5W7+Yn+3inVj/rwyYS5eMwlNGi6NAOMkEyhcfytUsIAA==",
+      "integrity": "sha512-c9gsyWxwletxDyzkszXxBYUn00dhL7v34oqmEIpZKWXScKboONYYssF1UOBWCQg0NssZjdQ4vorMQc/Dl59wVw==",
       "requires": {
         "@formkit/drag-and-drop": "^0.0.38",
         "@json2csv/plainjs": "^7.0.6",
@@ -13993,11 +14001,11 @@
         "date-fns": "^4.1.0",
         "event-source-polyfill": "^1.0.31",
         "leaflet": "^1.9.4",
-        "react-external-link": "^2.3.1",
+        "react-external-link": "^2.4.0",
         "react-leaflet": "^4.2.1",
         "react-swipeable": "^7.0.2",
         "react-tag-autocomplete": "^7.4.0",
-        "recharts": "^2.13.3"
+        "recharts": "^2.14.1"
       }
     },
     "@shlinkio/stylelint-config-css-coding-standard": {
@@ -14196,6 +14204,11 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
     "@types/d3-array": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@@ -15030,6 +15043,11 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="
+    },
     "core-js-compat": {
       "version": "3.39.0",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.39.0.tgz",
@@ -17553,26 +17571,20 @@
       "dev": true
     },
     "react-router": {
-      "version": "6.28.0",
+      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz",
-      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+      "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==",
       "requires": {
-        "@remix-run/router": "1.21.0"
+        "@types/cookie": "^0.6.0",
-      }
+        "cookie": "^1.0.1",
-    },
+        "set-cookie-parser": "^2.6.0",
-    "react-router-dom": {
+        "turbo-stream": "2.4.0"
-      "version": "6.28.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
-      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
-      "requires": {
-        "@remix-run/router": "1.21.0",
-        "react-router": "6.28.0"
       }
     },
     "react-smooth": {
-      "version": "4.0.1",
+      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.3.tgz",
-      "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
+      "integrity": "sha512-PyxIrra8WZWrMRFcCiJsZ+JqFaxEINAt+v/w++wQKQlmO99Eh3+JTLeKApdTsLX2roBdWYXqPsaS8sO4UmdzIg==",
       "requires": {
         "fast-equals": "^5.0.1",
         "prop-types": "^15.8.1",
@@ -17661,9 +17673,9 @@
       "dev": true
     },
     "recharts": {
-      "version": "2.13.3",
+      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.3.tgz",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.14.1.tgz",
-      "integrity": "sha512-YDZ9dOfK9t3ycwxgKbrnDlRC4BHdjlY73fet3a0C1+qGMjXVZe6+VXmpOIIhzkje5MMEL8AN4hLIe4AMskBzlA==",
+      "integrity": "sha512-xtWulflkA+/xu4/QClBdtZYN30dbvTHjxjkh5XTMrH/CQ3WGDDPHHa/LLKCbgoqz0z3UaSH2/blV1i6VNMeh1g==",
       "requires": {
         "clsx": "^2.0.0",
         "eventemitter3": "^4.0.1",
@@ -17950,6 +17962,11 @@
         "randombytes": "^2.1.0"
       }
     },
+    "set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
     "set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -19173,6 +19190,11 @@
         "tslib": "^1.8.1"
       }
     },
+    "turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

package.json

@@ -33,9 +33,9 @@
     "@json2csv/plainjs": "^7.0.6",
     "@reduxjs/toolkit": "^2.4.0",
     "@shlinkio/data-manipulation": "^1.0.3",
-    "@shlinkio/shlink-frontend-kit": "^0.6.0",
+    "@shlinkio/shlink-frontend-kit": "^0.7.0",
     "@shlinkio/shlink-js-sdk": "^1.3.0",
-    "@shlinkio/shlink-web-component": "^0.11.0",
+    "@shlinkio/shlink-web-component": "^0.12.0",
     "bootstrap": "5.2.3",
     "bottlejs": "^2.0.1",
     "clsx": "^2.1.1",
@@ -46,7 +46,7 @@
     "react-dom": "^18.3.1",
     "react-external-link": "^2.4.0",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.2",
     "reactstrap": "^9.2.3",
     "redux-localstorage-simple": "^2.5.1",
     "workbox-core": "^7.3.0",

src/app/App.tsx

@@ -3,7 +3,7 @@ import type { Settings } from '@shlinkio/shlink-web-component/settings';
 import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useEffect, useRef } from 'react';
-import { Route, Routes, useLocation } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
 import { NotFound } from '../common/NotFound';
 import type { FCWithDeps } from '../container/utils';
@@ -69,11 +69,15 @@ const App: FCWithDeps<AppProps, AppDeps> = (
         <div className={clsx('shlink-wrapper', { 'd-flex align-items-center pt-3': isHome })}>
           <Routes>
             <Route index element={<Home />} />
-            <Route path="/settings/*" element={<Settings />} />
+            <Route path="/settings">
+              {['', '*'].map((path) => <Route key={path} path={path} element={<Settings />} />)}
+            </Route>
             <Route path="/manage-servers" element={<ManageServers />} />
             <Route path="/server/create" element={<CreateServer />} />
             <Route path="/server/:serverId/edit" element={<EditServer />} />
-            <Route path="/server/:serverId/*" element={<ShlinkWebComponentContainer />} />
+            <Route path="/server/:serverId">
+              {['', '*'].map((path) => <Route key={path} path={path} element={<ShlinkWebComponentContainer />} />)}
+            </Route>
             <Route path="*" element={<NotFound />} />
           </Routes>
         </div>

src/common/Home.tsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { clsx } from 'clsx';
 import { useEffect } from 'react';
 import { ExternalLink } from 'react-external-link';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router';
 import { Card } from 'reactstrap';
 import type { ServersMap } from '../servers/data';
 import { ServersListGroup } from '../servers/ServersListGroup';

src/common/MainHeader.tsx

@@ -4,7 +4,7 @@ import { useToggle } from '@shlinkio/shlink-frontend-kit';
 import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useEffect } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';

src/common/NotFound.tsx

@@ -1,6 +1,6 @@
 import { SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import type { FC, PropsWithChildren } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 
 type NotFoundProps = PropsWithChildren<{ to?: string }>;
 

src/common/ScrollToTop.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 
 export const ScrollToTop: FC<PropsWithChildren> = ({ children }) => {
   const location = useLocation();

src/index.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import pack from '../package.json';
 import { container } from './container';
 import { setUpStore } from './container/store';

src/servers/CreateServer.tsx

@@ -2,7 +2,7 @@ import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
 import { Result, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';

src/servers/DeleteServerModal.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import type { ServerWithId } from './data';
 

src/servers/ManageServers.tsx

@@ -4,7 +4,7 @@ import type { TimeoutToggle } from '@shlinkio/shlink-frontend-kit';
 import { Result, SearchField, SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';

src/servers/ManageServersRow.tsx

@@ -1,7 +1,7 @@
 import { faCheck as checkIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { FC } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { UncontrolledTooltip } from 'reactstrap';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';

src/servers/ManageServersRowDropdown.tsx

@@ -8,7 +8,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RowDropdownBtn, useToggle } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { DropdownItem } from 'reactstrap';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';

src/servers/ServersDropdown.tsx

@@ -1,6 +1,6 @@
 import { faPlus as plusIcon, faServer as serverIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import type { SelectedServer, ServersMap } from './data';
 import { getServerId } from './data';

src/servers/ServersListGroup.tsx

@@ -2,7 +2,7 @@ import { faChevronRight as chevronIcon } from '@fortawesome/free-solid-svg-icons
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { ListGroup, ListGroupItem } from 'reactstrap';
 import type { ServerWithId } from './data';
 import './ServersListGroup.scss';

src/servers/helpers/ServerError.tsx

@@ -1,6 +1,6 @@
 import { Message } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
 import type { FCWithDeps } from '../../container/utils';
 import { componentFactory, useDependencies } from '../../container/utils';

src/servers/helpers/withSelectedServer.tsx

@@ -1,7 +1,7 @@
 import { Message } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
 import type { FCWithDeps } from '../../container/utils';
 import { useDependencies } from '../../container/utils';

src/utils/helpers/hooks.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 export const useGoBack = () => {
   const navigate = useNavigate();

test/__helpers__/MemoryRouterWithParams.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useMemo } from 'react';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router';
 
 export type MemoryRouterWithParamsProps = PropsWithChildren<{
   params: Record<string, string>;

test/app/App.test.tsx

@@ -1,6 +1,6 @@
 import { act, render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { AppFactory } from '../../src/app/App';
 import { checkAccessibility } from '../__helpers__/accessibility';
 

test/common/MainHeader.test.tsx

@@ -1,7 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import { Router } from 'react-router';
 import { MainHeaderFactory } from '../../src/common/MainHeader';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';

test/servers/CreateServer.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import { Router } from 'react-router';
 import { CreateServerFactory } from '../../src/servers/CreateServer';
 import type { ServersMap } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/DeleteServerModal.test.tsx

@@ -1,7 +1,7 @@
 import { act, screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import { Router } from 'react-router';
 import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';

test/servers/EditServer.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
+import { Router } from 'react-router';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { EditServerFactory } from '../../src/servers/EditServer';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/ManageServers.test.tsx

@@ -1,6 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
 import { ManageServersFactory } from '../../src/servers/ManageServers';
 import type { ServersExporter } from '../../src/servers/services/ServersExporter';

test/servers/ManageServersRow.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { ServerWithId } from '../../src/servers/data';
 import { ManageServersRowFactory } from '../../src/servers/ManageServersRow';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/ManageServersRowDropdown.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import type { UserEvent } from '@testing-library/user-event';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { ServerWithId } from '../../src/servers/data';
 import { ManageServersRowDropdownFactory } from '../../src/servers/ManageServersRowDropdown';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/ServersDropdown.test.tsx

@@ -1,6 +1,6 @@
 import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { ServersMap } from '../../src/servers/data';
 import { ServersDropdown } from '../../src/servers/ServersDropdown';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/ServersListGroup.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { ServerWithId } from '../../src/servers/data';
 import { ServersListGroup } from '../../src/servers/ServersListGroup';
 import { checkAccessibility } from '../__helpers__/accessibility';

test/servers/__snapshots__/ManageServersRow.test.tsx.snap

@@ -33,6 +33,7 @@ exports[`<ManageServersRow /> > renders auto-connect icon only if server is auto
           data-th="Name"
         >
           <a
+            data-discover="true"
             href="/server/abc"
           >
             My server
@@ -73,6 +74,7 @@ exports[`<ManageServersRow /> > renders auto-connect icon only if server is auto
           data-th="Name"
         >
           <a
+            data-discover="true"
             href="/server/abc"
           >
             My server

test/servers/__snapshots__/ManageServersRowDropdown.test.tsx.snap

@@ -38,6 +38,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
     >
       <a
         class="dropdown-item"
+        data-discover="true"
         href="/server/abc123"
         role="menuitem"
         tabindex="0"
@@ -61,6 +62,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 1`] = `
       </a>
       <a
         class="dropdown-item"
+        data-discover="true"
         href="/server/abc123/edit"
         role="menuitem"
         tabindex="0"
@@ -181,6 +183,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
     >
       <a
         class="dropdown-item"
+        data-discover="true"
         href="/server/abc123"
         role="menuitem"
         tabindex="0"
@@ -204,6 +207,7 @@ exports[`<ManageServersRowDropdown /> > renders expected size and icon 2`] = `
       </a>
       <a
         class="dropdown-item"
+        data-discover="true"
         href="/server/abc123/edit"
         role="menuitem"
         tabindex="0"

test/servers/helpers/ServerError.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data';
 import { ServerErrorFactory } from '../../../src/servers/helpers/ServerError';
 import { checkAccessibility } from '../../__helpers__/accessibility';

test/settings/Settings.test.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { Settings } from '../../src/settings/Settings';
 import { checkAccessibility } from '../__helpers__/accessibility';