feat: refactor App component to integrate React Router for navigation

frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 import { getSeed, getTrips, getTripItems, toggleTripItem } from "./api";
 import ItemsPage from "./pages/ItemsPage";
 
@@ -24,23 +25,8 @@ export default function App() {
     }
   }, [view]);
 
-  if (view === "items") {
-    return (
-      <div className="p-4 max-w-4xl mx-auto">
-        <div className="mb-4">
-          <button
-            onClick={() => setView("trips")}
-            className="bg-gray-500 text-white px-3 py-1 rounded"
-          >
-            ← Zurück zu Trips
-          </button>
-        </div>
-        <ItemsPage />
-      </div>
-    );
-  }
-
   return (
+    <Router>
       <div className="p-4 max-w-2xl mx-auto">
         <h1 className="text-2xl font-bold mb-4">Packlist</h1>
 
@@ -54,14 +40,18 @@ export default function App() {
           >
             Seed-Daten erzeugen
           </button>
-        <button
-          className="bg-green-500 text-white px-4 py-2 rounded"
-          onClick={() => setView("items")}
-        >
+          <Link to="/items">
+            <button className="bg-green-500 text-white px-4 py-2 rounded">
               Alle Items
             </button>
+          </Link>
         </div>
 
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <>
                 {trips.map((trip) => (
                   <div key={trip.id} className="border rounded p-2 mb-4">
                     <div className="flex justify-between items-center">
@@ -97,6 +87,12 @@ export default function App() {
                     )}
                   </div>
                 ))}
+              </>
+            }
+          />
+          <Route path="/items" element={<ItemsPage />} />
+        </Routes>
       </div>
+    </Router>
   );
 }