react-router-dom

package.json

@@ -73,7 +73,6 @@
     "@valtown/codemirror-codeium": "^1.1.1",
     "@valtown/codemirror-ts": "^2.2.0",
     "@vercel/analytics": "^1.4.1",
-    "vite-plugin-vercel": "^9.0.4",
     "change-case": "^5.4.4",
     "circuit-json": "^0.0.130",
     "circuit-json-to-bom-csv": "^0.0.6",
@@ -109,6 +108,7 @@
     "react-hook-form": "^7.53.0",
     "react-query": "^3.39.3",
     "react-resizable-panels": "^2.1.3",
+    "react-router-dom": "^7.1.1",
     "recharts": "^2.12.7",
     "rollup-plugin-visualizer": "^5.12.0",
     "sonner": "^1.5.0",
@@ -118,6 +118,7 @@
     "use-async-memo": "^1.2.5",
     "use-mouse-matrix-transform": "^1.3.0",
     "vaul": "^0.9.9",
+    "vite-plugin-vercel": "^9.0.4",
     "wouter": "^3.3.5"
   },
   "devDependencies": {

src/App.tsx

@@ -1,5 +1,5 @@
 import { Toaster } from "@/components/ui/toaster"
-import { Route, Switch } from "wouter"
+import { Route, Routes } from "react-router-dom"
 import "./components/CmdKMenu"
 import { ContextProviders } from "./ContextProviders"
 import { AiPage } from "./pages/ai"
@@ -21,23 +21,23 @@ import { DevLoginPage } from "./pages/dev-login"
 function App() {
   return (
     <ContextProviders>
-      <Switch>
-        <Route path="/" component={LandingPage} />
-        <Route path="/editor" component={EditorPage} />
-        <Route path="/quickstart" component={QuickstartPage} />
-        <Route path="/dashboard" component={DashboardPage} />
-        <Route path="/ai" component={AiPage} />
-        <Route path="/newest" component={NewestPage} />
-        <Route path="/settings" component={SettingsPage} />
-        <Route path="/search" component={SearchPage} />
-        <Route path="/authorize" component={AuthenticatePage} />
-        <Route path="/my-orders" component={MyOrdersPage} />
-        <Route path="/orders/:orderId" component={ViewOrderPage} />
-        <Route path="/preview" component={PreviewPage} />
-        <Route path="/dev-login" component={DevLoginPage} />
-        <Route path="/:username" component={UserProfilePage} />
-        <Route path="/:author/:snippetName" component={ViewSnippetPage} />
-      </Switch>
+      <Routes>
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/editor" element={<EditorPage />} />
+        <Route path="/quickstart" element={<QuickstartPage />} />
+        <Route path="/dashboard" element={<DashboardPage />} />
+        <Route path="/ai" element={<AiPage />} />
+        <Route path="/newest" element={<NewestPage />} />
+        <Route path="/settings" element={<SettingsPage />} />
+        <Route path="/search" element={<SearchPage />} />
+        <Route path="/authorize" element={<AuthenticatePage />} />
+        <Route path="/my-orders" element={<MyOrdersPage />} />
+        <Route path="/orders/:orderId" element={<ViewOrderPage />} />
+        <Route path="/preview" element={<PreviewPage />} />
+        <Route path="/dev-login" element={<DevLoginPage />} />
+        <Route path="/:username" element={<UserProfilePage />} />
+        <Route path="/:author/:snippetName" element={<ViewSnippetPage />} />
+      </Routes>
       <Toaster />
     </ContextProviders>
   )

src/entry-server.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from "react"
+import { renderToString } from "react-dom/server"
+import { StaticRouter } from "react-router-dom"
+import App from "./App"
+
+export function render(url: string) {
+  return renderToString(
+    <StrictMode>
+      <StaticRouter location={url}>
+        <App />
+      </StaticRouter>
+    </StrictMode>
+  )
+}

src/main.tsx

@@ -1,10 +1,14 @@
 import { StrictMode } from "react"
-import { createRoot } from "react-dom/client"
+import { hydrateRoot } from "react-dom/client"
+import { BrowserRouter } from "react-router-dom"
 import App from "./App.tsx"
 import "./index.css"
 
-createRoot(document.getElementById("root")!).render(
+hydrateRoot(
+  document.getElementById("root")!,
   <StrictMode>
-    <App />
-  </StrictMode>,
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
 )