2026-10-26 14:25:47 +01:00
parent 12a7bc895c
commit b2577c249a
30 changed files with 1908 additions and 1 deletions
@@ -0,0 +1,107 @@
+import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
+
+const Navbar = (props) => {
+  return (
+    <nav className="navbar navbar-expand-lg bg-body-tertiary">
+      <div className="container-fluid">
+        <Link className="navbar-brand" to="/">
+          Navbar
+        </Link>
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarNav"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarNav">
+          <ul className="navbar-nav">
+            <li className="nav-item">
+              <Link className="nav-link" to="/">
+                Home
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link className="nav-link" to="/about">
+                About
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Navbar />
+      <main id="main">
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <div className="page-home container py-5">
+                <h2>Home</h2>
+                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, voluptatibus.</p>
+              </div>
+            }
+          />
+          <Route
+            path="/about"
+            element={
+              <div className="page-about container py-5">
+                <h2>About</h2>
+                <p>
+                  sit amet consectetur adipisicing elit. Minima, voluptatibus nobis molestiae, dignissimos id dolores
+                  minus iste quisquam harum vitae rem dolorem debitis natus asperiores amet rerum ratione laboriosam
+                  quam. Sit corporis voluptate laboriosam doloribus incidunt voluptatibus repellat. Excepturi vitae
+                  perferendis odit
+                </p>
+              </div>
+            }
+          />
+        </Routes>
+        <div className="container py-3">
+          <div className="alert alert-primary">
+            <h2>Übung 15: Komponenten von React Router aufteilen</h2>
+            <p>
+              In dem vorherigen Beispiel haben wir die einzelnen Komponenten für ein einfaches Verständnis der
+              Funktionsweise von React Router in einer Datei definiert. In einer echten Anwendung würdest du die
+              Komponenten wahrscheinlich in separate Dateien aufteilen und importieren.
+            </p>
+            <p>Genau das ist nun deine Aufgabe:</p>
+            <ul className="list">
+              <li>Teile die Komponenten Navbar, HomePage und AboutPage in separate Dateien auf.</li>
+              <li>
+                {' '}
+                Importiere die Komponenten in der <strong>App.jsx</strong>-Datei.
+              </li>
+              <li>Passe die Pfade in den Link-Komponenten und Route-Komponenten entsprechend an.</li>
+              <li>
+                {' '}
+                Füge eine weitere Seite hinzu, z.B. eine Kontaktseite, und verlinke sie in der Navigationsleiste.
+              </li>
+              <li>
+                {' '}
+                Die <strong>&lt;BrowserRouter&gt;</strong>-Komponente sollte nur einmal in der Anwendung verwendet
+                werden. Üblicherweise wird sie in der main.jsx-Datei um die gesamte Anwendung gewickelt.
+              </li>
+            </ul>
+            <p>
+              <strong>Tipp:</strong> Du kannst die Dateien Navbar.jsx wie gewohnt im components-Ordner erstellen und die
+              Seitenkomponenten HomePage.jsx, AboutPage.jsx und ContactPage.jsx in einem pages-Ordner ablegen. Das sorgt
+              für eine bessere Struktur und Übersichtlichkeit deiner Anwendung.
+            </p>
+          </div>
+        </div>
+      </main>
+    </BrowserRouter>
+  );
+}
+
+export default App;