05_react/uebungen/u15_routing/src/App.jsx

@@ -0,0 +1,50 @@
+import Router from './routes/Router';
+
+// components
+import Navbar from './components/navs/Navbar';
+
+function App() {
+  return (
+    <>
+      <Navbar />
+      <main id="main">
+        <Router />
+        <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>
+    </>
+  );
+}
+
+export default App;