Setup react router

client-tauri/src/App.tsx

@@ -1,84 +1,43 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import { appendToFilename } from './utils/file-utils';
-import { openFiles, downloadFile } from './utils/tauri-wrapper'
-import { rotatePages } from './utils/pdf-operations';
-import "./App.css";
-
-function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
-
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(`Hello, ${name}! You've been greeted from Tauri!`);
-  }
-  async function rotatePdf() {
-    var selected = await openFiles({
-      multiple: false,
-      filters: [{
-        name: 'PDF',
-        extensions: ['pdf']
-      }]
-    })
-    
-    if (!selected) return;
-    selected
-
-    const rotated = await rotatePages(selected[0].data, 90);
-    console.log(rotated);
-
-    const appendedPath = appendToFilename(selected[0].getPath(), "_rotated");
-    console.log(appendedPath)
-
-    await downloadFile(rotated, {
-      defaultPath: appendedPath,
-      filters: [{
-        name: "PDF",
-        extensions: ['pdf']
-      }]
-    });
-    console.log("done!")
-  }
+import { Routes, Route, Outlet } from "react-router-dom";
+import Home from "./pages/Home";
+import About from "./pages/About";
+import Dashboard from "./pages/Dashboard";
+import NoMatch from "./pages/NoMatch";
+import NavBar from "./components/NavBar";
 
+export default function App() {
   return (
-    <div className="container">
-      <h1>Welcome to Tauri!</h1>
+    <div>
+      <h1>Basic Example</h1>
 
-      <div className="row">
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
-        </a>
-        <a href="https://tauri.app" target="_blank">
-          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
+      {/* Routes nest inside one another. Nested route paths build upon
+            parent route paths, and nested route elements render inside
+            parent route elements. See the note about <Outlet> below. */}
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="about" element={<About />} />
+          <Route path="dashboard" element={<Dashboard />} />
 
-      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
-
-      <form
-        className="row"
-        onSubmit={(e) => {
-          e.preventDefault();
-          greet();
-        }}
-      >
-        <input
-          id="greet-input"
-          onChange={(e) => setName(e.currentTarget.value)}
-          placeholder="Enter a name..."
-        />
-        <button type="submit">Greet</button>
-      </form>
-
-      <button onClick={rotatePdf}>Rotate 90</button>
-
-      <p>{greetMsg}</p>
+          {/* Using path="*"" means "match anything", so this route
+                acts like a catch-all for URLs that we don't have explicit
+                routes for. */}
+          <Route path="*" element={<NoMatch />} />
+        </Route>
+      </Routes>
     </div>
   );
 }
 
-export default App;
+function Layout() {
+  return (
+    <div>
+        <NavBar/>
+
+      {/* An <Outlet> renders whatever child route is currently active,
+          so you can think about this <Outlet> as a placeholder for
+          the child routes we defined above. */}
+      <Outlet />
+    </div>
+  );
+}