fix: switch ui to HashRouter so that /index.html and nested page reloads work on hosted sites

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/main.tsx

@@ -1,12 +1,12 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-import { BrowserRouter } from "react-router"
+import { HashRouter as Router } from "react-router"
 import App from "./App.tsx"
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <BrowserRouter>
+    <Router>
       <App />
-    </BrowserRouter>
+    </Router>
   </StrictMode>,
 )

pdl-live-react/tests/basics.spec.test.ts

@@ -1,11 +1,11 @@
 import { join } from "path"
 import { test, expect } from "@playwright/test"
 ;[
-  { path: "", title: /Viewer/ },
-  { path: "welcome", title: /Welcome/ },
-  { path: "about", title: /About/ },
-  { path: "upload", title: /Upload/ },
-  { path: "demos/Fibonacci", title: /Fibonacci/ },
+  { path: "#", title: /Viewer/ },
+  { path: "#welcome", title: /Welcome/ },
+  { path: "#about", title: /About/ },
+  { path: "#upload", title: /Upload/ },
+  { path: "#demos/Fibonacci", title: /Fibonacci/ },
 ].forEach(({ path, title }) =>
   test(`${path} has title ${title}`, async ({ page }) => {
     await page.goto(join("http://localhost:1420", path))