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

@@ -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>
+    </>
   );
 }