2026-10-27 10:33:45 +01:00
parent 72d02ee501
commit 3b5f77b95e
28 changed files with 2703 additions and 66 deletions
@@ -1,71 +1,12 @@
-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>
-  );
-};
+import Navbar from './components/navs/Navbar.jsx';
+import Router from './routes/Router.jsx';

 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>
+        <Router />
        <div className="container py-3">
          <div className="alert alert-primary">
            <h2>Übung 15: Komponenten von React Router aufteilen</h2>
@@ -100,7 +41,7 @@ function App() {
          </div>
        </div>
      </main>
-    </BrowserRouter>
+    </>
  );
 }

@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom';
+
+function Navbar() {
+  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="Navigation umschalten">
+          <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>
+            <li className="nav-item">
+              <Link className="nav-link" to="/contact">
+                Kontakt
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;
@@ -1,15 +1,19 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';

 import App from './App.jsx';

 import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap'; // js
 // import './styles/main.scss';

 const root = createRoot(document.getElementById('root'));

 root.render(
  <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
  </StrictMode>,
 );
@@ -0,0 +1,14 @@
+function AboutPage() {
+  return (
+    <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>
+  );
+}
+
+export default AboutPage;
@@ -0,0 +1,11 @@
+function ContactPage() {
+  return (
+    <div className="page-contact container py-5">
+      <h2>Kontakt</h2>
+      <p>Hast du Fragen? Schreib uns eine E-Mail:</p>
+      <a href="mailto:kontakt@example.com">kontakt@example.com</a>
+    </div>
+  );
+}
+
+export default ContactPage;
@@ -0,0 +1,10 @@
+function HomePage() {
+  return (
+    <div className="page-home container py-5">
+      <h2>Home</h2>
+      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, voluptatibus.</p>
+    </div>
+  );
+}
+
+export default HomePage;
@@ -0,0 +1,19 @@
+import { Route, Routes } from 'react-router-dom';
+
+// Pages Komponenten
+import HomePage from '../pages/HomePage';
+import AboutPage from '../pages/AboutPage';
+import ContactPage from '../pages/ContactPage';
+
+const Router = () => {
+  // const { } = props;
+
+  return (
+    <Routes>
+      <Route path="/" element={<HomePage />} />
+      <Route path="/about" element={<AboutPage />} />
+      <Route path="/contact" element={<ContactPage />} />
+    </Routes>
+  );
+};
+export default Router;