Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

Answer 1

[slaxxer]

Alles in der App.js zu speichern ist nicht sehr effizient, ich rate dir das Prinzip Separate of Concern anzuwenden, heißt Logik und Template zu trennen. Desweiteren solltest du mit Containern und Componenten arbeiten um die Struktur eben organisierter zu haben.

Answer 2

[guteantwort626]

Du musst den Router in die MainView-Komponente a die Stelle einfügen, wo jetzt Main ist. Sonst werden header und footer nur auf der Startseite angezeigt. Dann natürlich den component für die Route "/" auf <Main /> ändern.