51 lines
2.0 KiB
JavaScript
51 lines
2.0 KiB
JavaScript
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><BrowserRouter></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;
|