Add React Router for proper page routing

Co-authored-by: Boshen <[email protected]>

Author: Copilot

apps/dashboard/package.json

@@ -10,15 +10,17 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
+    "lucide-react": "^0.414.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "recharts": "^2.12.6",
-    "lucide-react": "^0.414.0"
+    "react-router-dom": "^7.8.2",
+    "recharts": "^2.12.6"
   },
   "devDependencies": {
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "typescript": "catalog:",
-    "rolldown-vite": "7.1.4"
+    "@types/react-router-dom": "^5.3.3",
+    "rolldown-vite": "7.1.4",
+    "typescript": "catalog:"
   }
 }

apps/dashboard/src/App.tsx

@@ -1,66 +1,19 @@
-import { useState } from 'react'
-import { BarChart3, Package, Zap } from 'lucide-react'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import './App.css'
-import RolldownStats from './RolldownStats'
-import MinificationBenchmarks from './MinificationBenchmarks'
+import Layout from './components/Layout'
+import RolldownStatsPage from './pages/RolldownStatsPage'
+import MinificationBenchmarksPage from './pages/MinificationBenchmarksPage'
 
 function App() {
-  const [selectedPage, setSelectedPage] = useState('rolldown')
-  const [selectedMetric, setSelectedMetric] = useState('bundleSize')
-
   return (
-    <div className="dashboard">
-      <header className="dashboard-header">
-        <div className="header-content">
-          <div className="logo">
-            <BarChart3 size={28} />
-            <h1>{selectedPage === 'rolldown' ? 'Rolldown-Vite Dashboard' : 'Minification Benchmarks'}</h1>
-          </div>
-          <p className="header-subtitle">
-            {selectedPage === 'rolldown' 
-              ? 'Statistics collected from different Rolldown-Vite versions'
-              : 'Performance comparison of JavaScript minification tools'}
-          </p>
-        </div>
-      </header>
-
-      {/* Page Navigation */}
-      <nav className="page-nav">
-        <button
-          className={`page-button ${selectedPage === 'rolldown' ? 'active' : ''}`}
-          onClick={() => {
-            setSelectedPage('rolldown')
-            setSelectedMetric('bundleSize')
-          }}
-        >
-          <Package size={20} />
-          Rolldown Stats
-        </button>
-        <button
-          className={`page-button ${selectedPage === 'minification' ? 'active' : ''}`}
-          onClick={() => {
-            setSelectedPage('minification')
-            setSelectedMetric('minTime')
-          }}
-        >
-          <Zap size={20} />
-          Minification Benchmarks
-        </button>
-      </nav>
-
-      {/* Render the appropriate component based on selected page */}
-      {selectedPage === 'rolldown' ? (
-        <RolldownStats 
-          selectedMetric={selectedMetric} 
-          setSelectedMetric={setSelectedMetric} 
-        />
-      ) : (
-        <MinificationBenchmarks 
-          selectedMetric={selectedMetric} 
-          setSelectedMetric={setSelectedMetric} 
-        />
-      )}
-    </div>
+    <BrowserRouter basename="/vibe-dashboard">
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<RolldownStatsPage />} />
+          <Route path="minification" element={<MinificationBenchmarksPage />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   )
 }
 

apps/dashboard/src/components/Layout.tsx

@@ -0,0 +1,33 @@
+import { Outlet, Link, useLocation } from 'react-router-dom'
+import { Package, Zap } from 'lucide-react'
+
+function Layout() {
+  const location = useLocation()
+
+  return (
+    <>
+      {/* Page Navigation */}
+      <nav className="page-nav">
+        <Link
+          to="/"
+          className={`page-button ${location.pathname === '/' ? 'active' : ''}`}
+        >
+          <Package size={20} />
+          Rolldown Stats
+        </Link>
+        <Link
+          to="/minification"
+          className={`page-button ${location.pathname === '/minification' ? 'active' : ''}`}
+        >
+          <Zap size={20} />
+          Minification Benchmarks
+        </Link>
+      </nav>
+
+      {/* Render the current route's component */}
+      <Outlet />
+    </>
+  )
+}
+
+export default Layout

apps/dashboard/src/pages/MinificationBenchmarksPage.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+import { BarChart3 } from 'lucide-react'
+import MinificationBenchmarks from '../MinificationBenchmarks'
+
+function MinificationBenchmarksPage() {
+  const [selectedMetric, setSelectedMetric] = useState('minTime')
+
+  return (
+    <div className="dashboard">
+      <header className="dashboard-header">
+        <div className="header-content">
+          <div className="logo">
+            <BarChart3 size={28} />
+            <h1>Minification Benchmarks</h1>
+          </div>
+          <p className="header-subtitle">
+            Performance comparison of JavaScript minification tools
+          </p>
+        </div>
+      </header>
+
+      <MinificationBenchmarks 
+        selectedMetric={selectedMetric} 
+        setSelectedMetric={setSelectedMetric} 
+      />
+    </div>
+  )
+}
+
+export default MinificationBenchmarksPage

apps/dashboard/src/pages/RolldownStatsPage.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+import { BarChart3 } from 'lucide-react'
+import RolldownStats from '../RolldownStats'
+
+function RolldownStatsPage() {
+  const [selectedMetric, setSelectedMetric] = useState('bundleSize')
+
+  return (
+    <div className="dashboard">
+      <header className="dashboard-header">
+        <div className="header-content">
+          <div className="logo">
+            <BarChart3 size={28} />
+            <h1>Rolldown-Vite Dashboard</h1>
+          </div>
+          <p className="header-subtitle">
+            Statistics collected from different Rolldown-Vite versions
+          </p>
+        </div>
+      </header>
+
+      <RolldownStats 
+        selectedMetric={selectedMetric} 
+        setSelectedMetric={setSelectedMetric} 
+      />
+    </div>
+  )
+}
+
+export default RolldownStatsPage