use react-router-dom for page routing instead of useState onClick

deno.json

@@ -20,9 +20,11 @@
     "@tauri-apps/api": "npm:@tauri-apps/api@^2.0.2",
     "@types/react": "npm:@types/react@^18.3.11",
     "@types/react-dom": "npm:@types/react-dom@^18.3.1",
+    "@types/react-router-dom": "npm:@types/react-router-dom@^5.3.3",
     "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.2",
     "react": "npm:react@^18.3.1",
     "react-dom": "npm:react-dom@^18.3.1",
+    "react-router-dom": "npm:react-router-dom@^6.27.0",
     "vite": "npm:vite@^5.4.9"
   },
   "nodeModulesDir": "auto"

src-www/App.tsx

@@ -1,18 +1,22 @@
-import { useState } from "react";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 import NavBar from "./components/NavBar.tsx";
 import NavItem from "./components/NavItem.tsx";
 import Extension from "./pages/Extensions.tsx";
 import More from "./pages/More.tsx";
 
-export default function App() {
-  const [page, setPage] = useState("extension");
-
-  const pages: { [key: string]: React.ReactNode } = {
-    extension: <Extension />,
-    more: <More />,
-  };
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Extension />,
+  },
+  {
+    path: "/more",
+    element: <More />,
+  },
+]);
 
+export default function App() {
   return (
     <div
       style={{
@@ -23,13 +27,13 @@ export default function App() {
       }}
     >
       <main style={{ flex: 1 }}>
-        {pages[page]}
+        <RouterProvider router={router} />
       </main>
       <NavBar>
-        <NavItem onClick={() => setPage("extension")}>
+        <NavItem href="/">
           <span>Extensions</span>
         </NavItem>
-        <NavItem onClick={() => setPage("more")}>
+        <NavItem href="/more">
           <span>More</span>
         </NavItem>
       </NavBar>

src-www/components/NavItem.tsx

@@ -1,15 +1,17 @@
 export default function NavItem(
-  { onClick, children }: { onClick: () => void; children: React.ReactNode },
+  { href, children }: { href: string; children: React.ReactNode },
 ) {
   return (
     <a
-      onClick={onClick}
+      href={href}
       style={{
         cursor: "pointer",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
         gap: "0.25rem",
+        textDecoration: "none",
+        color: "inherit",
       }}
     >
       {children}