Switch from Reach Router to React Router (#9273)

We want to upgrade to React 17, but Reach Router does not work with React 17:
https://github.com/reach/router/issues/429

Also, the Reach + React Router projects announced an intention to join forces
and just continue as React Router:
https://reacttraining.com/blog/reach-react-router-future/

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/react-app/package-lock.json

@@ -25,7 +25,6 @@
         "@fortawesome/free-solid-svg-icons": "^5.7.1",
         "@fortawesome/react-fontawesome": "^0.1.4",
         "@nexucis/fuzzy": "^0.2.2",
-        "@reach/router": "^1.2.1",
         "bootstrap": "^4.6.0",
         "codemirror-promql": "^0.17.0",
         "css.escape": "^1.5.1",
@@ -42,6 +41,7 @@
         "react-copy-to-clipboard": "^5.0.1",
         "react-dom": "^16.7.0",
         "react-resize-detector": "^5.0.7",
+        "react-router-dom": "^5.2.1",
         "react-scripts": "3.4.4",
         "react-test-renderer": "^16.9.0",
         "reactstrap": "^8.9.0",
@@ -61,11 +61,11 @@
         "@types/jquery": "^3.5.1",
         "@types/moment-timezone": "^0.5.10",
         "@types/node": "^12.11.1",
-        "@types/reach__router": "^1.2.6",
         "@types/react": "^16.8.2",
         "@types/react-copy-to-clipboard": "^5.0.0",
         "@types/react-dom": "^16.8.0",
         "@types/react-resize-detector": "^5.0.0",
+        "@types/react-router-dom": "^5.1.8",
         "@types/reactstrap": "^8.7.2",
         "@types/sanitize-html": "^1.20.2",
         "@types/sinon": "^9.0.4",
@@ -2066,20 +2066,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/@reach/router": {
-      "version": "1.3.4",
-      "license": "MIT",
-      "dependencies": {
-        "create-react-context": "0.3.0",
-        "invariant": "^2.2.3",
-        "prop-types": "^15.6.1",
-        "react-lifecycles-compat": "^3.0.4"
-      },
-      "peerDependencies": {
-        "react": "15.x || 16.x || 16.4.0-alpha.0911da3",
-        "react-dom": "15.x || 16.x || 16.4.0-alpha.0911da3"
-      }
-    },
     "node_modules/@sinonjs/commons": {
       "version": "1.8.3",
       "dev": true,
@@ -2363,6 +2349,12 @@
       "version": "16.4.6",
       "license": "MIT"
     },
+    "node_modules/@types/history": {
+      "version": "4.7.9",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
+      "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==",
+      "dev": true
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "license": "MIT"
@@ -2585,24 +2577,6 @@
       "version": "1.5.5",
       "license": "MIT"
     },
-    "node_modules/@types/reach__router": {
-      "version": "1.3.9",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/reach__router/node_modules/@types/react": {
-      "version": "17.0.15",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/@types/react": {
       "version": "16.14.11",
       "dev": true,
@@ -2657,6 +2631,27 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.16",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.16.tgz",
+      "integrity": "sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.8.tgz",
+      "integrity": "sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==",
+      "dev": true,
+      "dependencies": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/react-test-renderer": {
       "version": "17.0.1",
       "dev": true,
@@ -5873,18 +5868,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "node_modules/create-react-context": {
-      "version": "0.3.0",
-      "license": "MIT",
-      "dependencies": {
-        "gud": "^1.0.0",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
-      }
-    },
     "node_modules/crelt": {
       "version": "1.0.5",
       "license": "MIT"
@@ -8497,6 +8480,19 @@
       "version": "1.1.0",
       "license": "MIT"
     },
+    "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"
+      }
+    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "license": "MIT",
@@ -8506,6 +8502,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "license": "ISC"
@@ -12056,7 +12060,6 @@
     },
     "node_modules/path-to-regexp": {
       "version": "1.8.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "isarray": "0.0.1"
@@ -12064,7 +12067,6 @@
     },
     "node_modules/path-to-regexp/node_modules/isarray": {
       "version": "0.0.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-type": {
@@ -13880,6 +13882,56 @@
         "react-dom": "^16.0.0"
       }
     },
+    "node_modules/react-router-dom": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.1.tgz",
+      "integrity": "sha512-xhFFkBGVcIVPbWM2KEYzED+nuHQPmulVa7sqIs3ESxzYd1pYg8N8rxPnQ4T2o1zu/2QeDUWcaqST131SO1LR3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.1",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router-dom/node_modules/react-router": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
+      "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
+      "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"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router-dom/node_modules/react-router/node_modules/mini-create-react-context": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "tiny-warning": "^1.0.3"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.0.0",
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "3.4.4",
       "license": "MIT",
@@ -14817,6 +14869,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "node_modules/resolve-url": {
       "version": "0.2.1",
       "license": "MIT"
@@ -16263,7 +16320,6 @@
     "node_modules/tempusdominus-core/node_modules/moment": {
       "version": "2.24.0",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "*"
       }
@@ -16505,6 +16561,16 @@
       "version": "0.3.0",
       "license": "MIT"
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "license": "MIT",
@@ -17012,6 +17078,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "license": "MIT",
@@ -19113,15 +19184,6 @@
     "@nodelib/fs.stat": {
       "version": "1.1.3"
     },
-    "@reach/router": {
-      "version": "1.3.4",
-      "requires": {
-        "create-react-context": "0.3.0",
-        "invariant": "^2.2.3",
-        "prop-types": "^15.6.1",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
     "@sinonjs/commons": {
       "version": "1.8.3",
       "dev": true,
@@ -19329,6 +19391,12 @@
         }
       }
     },
+    "@types/history": {
+      "version": "4.7.9",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
+      "integrity": "sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==",
+      "dev": true
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.3"
     },
@@ -19487,24 +19555,6 @@
     "@types/q": {
       "version": "1.5.5"
     },
-    "@types/reach__router": {
-      "version": "1.3.9",
-      "dev": true,
-      "requires": {
-        "@types/react": "*"
-      },
-      "dependencies": {
-        "@types/react": {
-          "version": "17.0.15",
-          "dev": true,
-          "requires": {
-            "@types/prop-types": "*",
-            "@types/scheduler": "*",
-            "csstype": "^3.0.2"
-          }
-        }
-      }
-    },
     "@types/react": {
       "version": "16.14.11",
       "dev": true,
@@ -19557,6 +19607,27 @@
         }
       }
     },
+    "@types/react-router": {
+      "version": "5.1.16",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.16.tgz",
+      "integrity": "sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.8.tgz",
+      "integrity": "sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/react-test-renderer": {
       "version": "17.0.1",
       "dev": true,
@@ -21767,13 +21838,6 @@
         "sha.js": "^2.4.8"
       }
     },
-    "create-react-context": {
-      "version": "0.3.0",
-      "requires": {
-        "gud": "^1.0.0",
-        "warning": "^4.0.3"
-      }
-    },
     "crelt": {
       "version": "1.0.5"
     },
@@ -23513,6 +23577,19 @@
     "hex-color-regex": {
       "version": "1.1.0"
     },
+    "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"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "requires": {
@@ -23521,6 +23598,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.9"
     },
@@ -25825,14 +25910,12 @@
     },
     "path-to-regexp": {
       "version": "1.8.0",
-      "dev": true,
       "requires": {
         "isarray": "0.0.1"
       },
       "dependencies": {
         "isarray": {
-          "version": "0.0.1",
+          "version": "0.0.1"
-          "dev": true
         }
       }
     },
@@ -27052,6 +27135,50 @@
         "resize-observer-polyfill": "^1.5.1"
       }
     },
+    "react-router-dom": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.1.tgz",
+      "integrity": "sha512-xhFFkBGVcIVPbWM2KEYzED+nuHQPmulVa7sqIs3ESxzYd1pYg8N8rxPnQ4T2o1zu/2QeDUWcaqST131SO1LR3w==",
+      "requires": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.2.1",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "react-router": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
+          "integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
+          "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"
+          },
+          "dependencies": {
+            "mini-create-react-context": {
+              "version": "0.4.1",
+              "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
+              "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
+              "requires": {
+                "@babel/runtime": "^7.12.1",
+                "tiny-warning": "^1.0.3"
+              }
+            }
+          }
+        }
+      }
+    },
     "react-scripts": {
       "version": "3.4.4",
       "requires": {
@@ -27681,6 +27808,11 @@
     "resolve-from": {
       "version": "3.0.0"
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1"
     },
@@ -28649,15 +28781,24 @@
     },
     "tempusdominus-bootstrap-4": {
       "version": "5.39.0",
-      "requires": {}
+      "requires": {
+        "bootstrap": "^4.5.2",
+        "jquery": "^3.5.1",
+        "moment": "^2.29.0",
+        "moment-timezone": "^0.5.31",
+        "popper.js": "^1.16.1"
+      }
     },
     "tempusdominus-core": {
       "version": "5.19.0",
-      "requires": {},
+      "requires": {
+        "jquery": "^3.5.0",
+        "moment": "~2.24.0",
+        "moment-timezone": "^0.5.28"
+      },
       "dependencies": {
         "moment": {
-          "version": "2.24.0",
+          "version": "2.24.0"
-          "peer": true
         }
       }
     },
@@ -28808,6 +28949,16 @@
     "timsort": {
       "version": "0.3.0"
     },
+    "tiny-invariant": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "requires": {
@@ -29130,6 +29281,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2"
     },

web/ui/react-app/package.json

@@ -20,7 +20,6 @@
     "@fortawesome/free-solid-svg-icons": "^5.7.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@nexucis/fuzzy": "^0.2.2",
-    "@reach/router": "^1.2.1",
     "bootstrap": "^4.6.0",
     "codemirror-promql": "^0.17.0",
     "css.escape": "^1.5.1",
@@ -37,6 +36,7 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.7.0",
     "react-resize-detector": "^5.0.7",
+    "react-router-dom": "^5.2.1",
     "react-scripts": "3.4.4",
     "react-test-renderer": "^16.9.0",
     "reactstrap": "^8.9.0",
@@ -76,11 +76,11 @@
     "@types/jquery": "^3.5.1",
     "@types/moment-timezone": "^0.5.10",
     "@types/node": "^12.11.1",
-    "@types/reach__router": "^1.2.6",
     "@types/react": "^16.8.2",
     "@types/react-copy-to-clipboard": "^5.0.0",
     "@types/react-dom": "^16.8.0",
     "@types/react-resize-detector": "^5.0.0",
+    "@types/react-router-dom": "^5.1.8",
     "@types/reactstrap": "^8.7.2",
     "@types/sanitize-html": "^1.20.2",
     "@types/sinon": "^9.0.4",

web/ui/react-app/src/App.test.tsx

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import App from './App';
 import Navigation from './Navbar';
 import { Container } from 'reactstrap';
-import { Router } from '@reach/router';
+import { Route } from 'react-router-dom';
 import {
   AlertsPage,
   ConfigPage,
@@ -37,7 +37,7 @@ describe('App', () => {
       const c = app.find(component);
       expect(c).toHaveLength(1);
     });
-    expect(app.find(Router)).toHaveLength(1);
+    expect(app.find(Route)).toHaveLength(9);
     expect(app.find(Container)).toHaveLength(1);
   });
 });

web/ui/react-app/src/App.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import Navigation from './Navbar';
 import { Container } from 'reactstrap';
 
-import { Router, Redirect } from '@reach/router';
+import { BrowserRouter as Router, Redirect, Switch, Route } from 'react-router-dom';
 import useMedia from 'use-media';
 import {
   AlertsPage,
@@ -69,25 +69,45 @@ const App: FC<AppProps> = ({ consolesLink }) => {
     >
       <Theme />
       <PathPrefixContext.Provider value={basePath}>
+        <Router basename={basePath}>
           <Navigation consolesLink={consolesLink} />
           <Container fluid style={{ paddingTop: 70 }}>
-          <Router basepath={`${basePath}`}>
+            <Switch>
-            <Redirect from="/" to={`graph`} noThrow />
+              <Redirect exact from="/" to={`graph`} />
               {/*
               NOTE: Any route added here needs to also be added to the list of
               React-handled router paths ("reactRouterPaths") in /web/web.go.
             */}
-            <PanelListPage path="/graph" />
+              <Route path="/graph">
-            <AlertsPage path="/alerts" />
+                <PanelListPage />
-            <ConfigPage path="/config" />
+              </Route>
-            <FlagsPage path="/flags" />
+              <Route path="/alerts">
-            <RulesPage path="/rules" />
+                <AlertsPage />
-            <ServiceDiscoveryPage path="/service-discovery" />
+              </Route>
-            <StatusPage path="/status" />
+              <Route path="/config">
-            <TSDBStatusPage path="/tsdb-status" />
+                <ConfigPage />
-            <TargetsPage path="/targets" />
+              </Route>
-          </Router>
+              <Route path="/flags">
+                <FlagsPage />
+              </Route>
+              <Route path="/rules">
+                <RulesPage />
+              </Route>
+              <Route path="/service-discovery">
+                <ServiceDiscoveryPage />
+              </Route>
+              <Route path="/status">
+                <StatusPage />
+              </Route>
+              <Route path="/tsdb-status">
+                <TSDBStatusPage />
+              </Route>
+              <Route path="/targets">
+                <TargetsPage />
+              </Route>
+            </Switch>
           </Container>
+        </Router>
       </PathPrefixContext.Provider>
     </ThemeContext.Provider>
   );

web/ui/react-app/src/Navbar.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 import {
   Collapse,
   Navbar,
@@ -26,7 +26,7 @@ const Navigation: FC<NavbarProps> = ({ consolesLink }) => {
   return (
     <Navbar className="mb-3" dark color="dark" expand="md" fixed="top">
       <NavbarToggler onClick={toggle} className="mr-2" />
-      <Link className="pt-0 navbar-brand" to={`${pathPrefix}/graph`}>
+      <Link className="pt-0 navbar-brand" to="/graph">
         Prometheus
       </Link>
       <Collapse isOpen={isOpen} navbar style={{ justifyContent: 'space-between' }}>
@@ -37,12 +37,12 @@ const Navigation: FC<NavbarProps> = ({ consolesLink }) => {
             </NavItem>
           )}
           <NavItem>
-            <NavLink tag={Link} to={`${pathPrefix}/alerts`}>
+            <NavLink tag={Link} to="/alerts">
               Alerts
             </NavLink>
           </NavItem>
           <NavItem>
-            <NavLink tag={Link} to={`${pathPrefix}/graph`}>
+            <NavLink tag={Link} to="/graph">
               Graph
             </NavLink>
           </NavItem>
@@ -51,25 +51,25 @@ const Navigation: FC<NavbarProps> = ({ consolesLink }) => {
               Status
             </DropdownToggle>
             <DropdownMenu>
-              <DropdownItem tag={Link} to={`${pathPrefix}/status`}>
+              <DropdownItem tag={Link} to="/status">
                 Runtime & Build Information
               </DropdownItem>
-              <DropdownItem tag={Link} to={`${pathPrefix}/tsdb-status`}>
+              <DropdownItem tag={Link} to="/tsdb-status">
                 TSDB Status
               </DropdownItem>
-              <DropdownItem tag={Link} to={`${pathPrefix}/flags`}>
+              <DropdownItem tag={Link} to="/flags">
                 Command-Line Flags
               </DropdownItem>
-              <DropdownItem tag={Link} to={`${pathPrefix}/config`}>
+              <DropdownItem tag={Link} to="/config">
                 Configuration
               </DropdownItem>
-              <DropdownItem tag={Link} to={`${pathPrefix}/rules`}>
+              <DropdownItem tag={Link} to="/rules">
                 Rules
               </DropdownItem>
-              <DropdownItem tag={Link} to={`${pathPrefix}/targets`}>
+              <DropdownItem tag={Link} to="/targets">
                 Targets
               </DropdownItem>
-              <DropdownItem tag={Link} to={`${pathPrefix}/service-discovery`}>
+              <DropdownItem tag={Link} to="/service-discovery">
                 Service Discovery
               </DropdownItem>
             </DropdownMenu>

web/ui/react-app/src/pages/alerts/Alerts.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import { useFetch } from '../../hooks/useFetch';
 import { withStatusIndicator } from '../../components/withStatusIndicator';
 import AlertsContent, { RuleStatus, AlertsProps } from './AlertContents';
@@ -8,7 +7,7 @@ import { API_PATH } from '../../constants/constants';
 
 const AlertsWithStatusIndicator = withStatusIndicator(AlertsContent);
 
-const Alerts: FC<RouteComponentProps> = () => {
+const Alerts: FC = () => {
   const pathPrefix = usePathPrefix();
   const { response, error, isLoading } = useFetch<AlertsProps>(`${pathPrefix}/${API_PATH}/rules?type=alert`);
 

web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState, Fragment } from 'react';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 import { Alert, Collapse, Table, Badge } from 'reactstrap';
 import { RuleStatus } from './AlertContents';
 import { Rule } from '../../types/types';

web/ui/react-app/src/pages/config/Config.tsx

@@ -1,5 +1,4 @@
 import React, { useState, FC } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import { Button } from 'reactstrap';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
@@ -44,7 +43,7 @@ export const ConfigContent: FC<ConfigContentProps> = ({ error, data }) => {
   );
 };
 
-const Config: FC<RouteComponentProps> = () => {
+const Config: FC = () => {
   const pathPrefix = usePathPrefix();
   const { response, error } = useFetch<YamlConfig>(`${pathPrefix}/${API_PATH}/status/config`);
   return <ConfigContent error={error} data={response.data} />;

web/ui/react-app/src/pages/flags/Flags.tsx

@@ -1,5 +1,4 @@
 import React, { ChangeEvent, FC, useState } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import { Input, InputGroup, Table } from 'reactstrap';
 import { withStatusIndicator } from '../../components/withStatusIndicator';
 import { useFetch } from '../../hooks/useFetch';
@@ -124,7 +123,7 @@ const FlagsWithStatusIndicator = withStatusIndicator(FlagsContent);
 
 FlagsContent.displayName = 'Flags';
 
-const Flags: FC<RouteComponentProps> = () => {
+const Flags: FC = () => {
   const pathPrefix = usePathPrefix();
   const { response, error, isLoading } = useFetch<FlagMap>(`${pathPrefix}/${API_PATH}/status/flags`);
   return <FlagsWithStatusIndicator data={response.data} error={error} isLoading={isLoading} />;

web/ui/react-app/src/pages/graph/PanelList.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useState, useEffect } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import { Alert, Button } from 'reactstrap';
 
 import Panel, { PanelOptions, PanelDefaultOptions } from './Panel';
@@ -17,7 +16,7 @@ export const updateURL = (nextPanels: PanelMeta[]) => {
   window.history.pushState({}, '', query);
 };
 
-interface PanelListContentProps extends RouteComponentProps {
+interface PanelListContentProps {
   panels: PanelMeta[];
   metrics: string[];
   useLocalTime: boolean;
@@ -122,7 +121,7 @@ export const PanelListContent: FC<PanelListContentProps> = ({
   );
 };
 
-const PanelList: FC<RouteComponentProps> = () => {
+const PanelList: FC = () => {
   const [delta, setDelta] = useState(0);
   const [useExperimentalEditor, setUseExperimentalEditor] = useLocalStorage('use-new-editor', true);
   const [useLocalTime, setUseLocalTime] = useLocalStorage('use-local-time', false);

web/ui/react-app/src/pages/rules/Rules.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import { useFetch } from '../../hooks/useFetch';
 import { withStatusIndicator } from '../../components/withStatusIndicator';
 import { RulesMap, RulesContent } from './RulesContent';
@@ -8,7 +7,7 @@ import { API_PATH } from '../../constants/constants';
 
 const RulesWithStatusIndicator = withStatusIndicator(RulesContent);
 
-const Rules: FC<RouteComponentProps> = () => {
+const Rules: FC = () => {
   const pathPrefix = usePathPrefix();
   const { response, error, isLoading } = useFetch<RulesMap>(`${pathPrefix}/${API_PATH}/rules`);
 

web/ui/react-app/src/pages/rules/RulesContent.tsx

@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import { APIResponse } from '../../hooks/useFetch';
 import { Alert, Table, Badge } from 'reactstrap';
-import { Link } from '@reach/router';
+import { Link } from 'react-router-dom';
 import { formatRelative, createExpressionLink, humanizeDuration, formatDuration } from '../../utils';
 import { Rule } from '../../types/types';
 import { now } from 'moment';
@@ -35,7 +34,7 @@ const GraphExpressionLink: FC<{ expr: string; text: string; title: string }> = p
   );
 };
 
-export const RulesContent: FC<RouteComponentProps & RulesContentProps> = ({ response }) => {
+export const RulesContent: FC<RulesContentProps> = ({ response }) => {
   const getBadgeColor = (state: string) => {
     switch (state) {
       case 'ok':

web/ui/react-app/src/pages/serviceDiscovery/LabelsTable.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useState } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import { Badge, Table } from 'reactstrap';
 import { TargetLabels } from './Services';
 import { ToggleMoreLess } from '../../components/ToggleMoreLess';
@@ -21,7 +20,7 @@ const formatLabels = (labels: Record<string, string> | string) => {
   });
 };
 
-export const LabelsTable: FC<RouteComponentProps & LabelProps> = ({ value, name }) => {
+export const LabelsTable: FC<LabelProps> = ({ value, name }) => {
   const [showMore, setShowMore] = useState(false);
 
   return (

web/ui/react-app/src/pages/serviceDiscovery/Services.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import { useFetch } from '../../hooks/useFetch';
 import { LabelsTable } from './LabelsTable';
 import { Target, Labels, DroppedTarget } from '../targets/target';
@@ -106,7 +105,7 @@ ServiceDiscoveryContent.displayName = 'ServiceDiscoveryContent';
 
 const ServicesWithStatusIndicator = withStatusIndicator(ServiceDiscoveryContent);
 
-const ServiceDiscovery: FC<RouteComponentProps> = () => {
+const ServiceDiscovery: FC = () => {
   const pathPrefix = usePathPrefix();
   const { response, error, isLoading } = useFetch<ServiceMap>(`${pathPrefix}/${API_PATH}/targets`);
   return (

web/ui/react-app/src/pages/status/Status.tsx

@@ -1,5 +1,4 @@
 import React, { Fragment, FC } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import { Table } from 'reactstrap';
 import { withStatusIndicator } from '../../components/withStatusIndicator';
 import { useFetch } from '../../hooks/useFetch';
@@ -83,7 +82,7 @@ const StatusWithStatusIndicator = withStatusIndicator(StatusContent);
 
 StatusContent.displayName = 'Status';
 
-const Status: FC<RouteComponentProps> = () => {
+const Status: FC = () => {
   const pathPrefix = usePathPrefix();
   const path = `${pathPrefix}/${API_PATH}`;
 

web/ui/react-app/src/pages/targets/Targets.tsx

@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import ScrapePoolList from './ScrapePoolList';
 
-const Targets: FC<RouteComponentProps> = () => {
+const Targets: FC = () => {
   return (
     <>
       <h2>Targets</h2>

web/ui/react-app/src/pages/tsdbStatus/TSDBStatus.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import { RouteComponentProps } from '@reach/router';
 import { Table } from 'reactstrap';
 
 import { useFetch } from '../../hooks/useFetch';
@@ -113,7 +112,7 @@ TSDBStatusContent.displayName = 'TSDBStatusContent';
 
 const TSDBStatusContentWithStatusIndicator = withStatusIndicator(TSDBStatusContent);
 
-const TSDBStatus: FC<RouteComponentProps> = () => {
+const TSDBStatus: FC = () => {
   const pathPrefix = usePathPrefix();
   const { response, error, isLoading } = useFetch<TSDBMap>(`${pathPrefix}/${API_PATH}/status/tsdb`);