Switch from react-router v6 to wouter

- react-router doesn't support getting unencoded path params,
  and we need that for parsing specs:
  remix-run/react-router#7173 (comment)
- wouter supports regexes in paths, so we can actually do validation
  in the routing layer itself
- react-router v7 is out, and we would have had to do a migration
  anyway.

binderhub/static/js/App.jsx

@@ -1,5 +1,5 @@
 import { LoadingPage } from "./pages/LoadingPage.jsx";
-import { Route, Routes } from "react-router-dom";
+import { Route, Router, Switch } from "wouter";
 import "bootstrap/js/dist/dropdown.js";
 
 import "./index.scss";
@@ -34,6 +34,7 @@ export const PAGE_CONFIG = window.pageConfig;
  * @prop {DetectConfig} [detect]
  * @prop {RepoConfig} repo
  * @prop {RefConfig} ref
+ * @prop {SpecConfig} spec
  *
  */
 /**
@@ -50,6 +51,12 @@ export const PUBLIC_BASE_URL = PAGE_CONFIG.publicBaseUrl
 const BUILD_TOKEN = PAGE_CONFIG.buildToken;
 
 export function App() {
+  // Wouter's <Router> component requires *not* having trailing slash to function
+  // the way we ant
+  const baseRouteUrl =
+    PAGE_CONFIG.baseUrl.slice(-1) == "/"
+      ? PAGE_CONFIG.baseUrl.slice(0, -1)
+      : PAGE_CONFIG.BASE_URL;
   return (
     <>
       {PAGE_CONFIG.bannerHtml && (
@@ -63,41 +70,40 @@ export function App() {
           <div className="text-center m-4">
             <img src={PAGE_CONFIG.logoUrl} width={PAGE_CONFIG.logoWidth} />
           </div>
-          <Routes>
-            <Route
-              path={PAGE_CONFIG.baseUrl}
-              element={
+          <Router base={baseRouteUrl}>
+            <Switch>
+              <Route path="/">
                 <HomePage
                   providers={PROVIDERS}
                   baseUrl={BASE_URL}
                   publicBaseUrl={PUBLIC_BASE_URL}
                 />
-              }
-            />
-            {PROVIDERS.map((p) => (
-              <Route
-                key={p.id}
-                path={`${PAGE_CONFIG.baseUrl}v2/${p.id}/*`}
-                element={
+              </Route>
+
+              {PROVIDERS.map((p) => (
+                <Route
+                  key={p.id}
+                  path={`/v2/${p.id}/(?<buildSpec>${p.spec.validateRegex})`}
+                >
                   <LoadingPage
                     baseUrl={BASE_URL}
                     buildToken={BUILD_TOKEN}
                     provider={p}
                   />
-                }
-              />
-            ))}
-            <Route
-              path={`${PAGE_CONFIG.baseUrl}about`}
-              element={
+                </Route>
+              ))}
+
+              <Route path="/about">
                 <AboutPage
                   aboutMessage={PAGE_CONFIG.aboutMessage}
                   binderVersion={PAGE_CONFIG.binderVersion}
                 />
-              }
-            />
-            <Route path="*" element={<NotFoundPage />} />
-          </Routes>
+              </Route>
+              <Route>
+                <NotFoundPage />
+              </Route>
+            </Switch>
+          </Router>
         </div>
       </div>
     </>

binderhub/static/js/index.jsx

@@ -1,10 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
 import { App } from "./App";
 
 const root = createRoot(document.getElementById("root"));
-root.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
-);
+root.render(<App />);

binderhub/static/js/pages/LoadingPage.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { BuilderLauncher } from "../components/BuilderLauncher.jsx";
-import { useParams } from "react-router";
-import { useSearchParams } from "react-router-dom";
+import { useParams, useSearch } from "wouter";
 import { NBViewerIFrame } from "../components/NBViewerIFrame.jsx";
 import { LoadingIndicator } from "../components/LoadingIndicator.jsx";
 import { FaviconUpdater } from "../components/FaviconUpdater.jsx";
@@ -20,10 +19,10 @@ export function LoadingPage({ baseUrl, buildToken, provider }) {
   const [progressState, setProgressState] = useState(null);
 
   const params = useParams();
-  const partialSpec = params["*"];
+  const partialSpec = params["0"];
   const buildSpec = `${provider.id}/${partialSpec}`;
 
-  const [searchParams, _] = useSearchParams();
+  const searchParams = new URLSearchParams(useSearch());
 
   const [isLaunching, setIsLaunching] = useState(false);
 

package.json

@@ -12,8 +12,7 @@
     "jquery": "^3.6.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^6.23.1",
-    "react-router-dom": "^6.23.1",
+    "wouter": "^3.3.5",
     "xterm": "^5.1.0",
     "xterm-addon-fit": "^0.7.0"
   },