LU02a - Installation

Um React Router in einem bestehenden Projekt zu nutzen, installierst du das Package:

npm install react-router-dom

Öffne src/main.jsx (bei Create React App heisst diese Datei meistens src/index.js) und wickle die App mit dem BrowserRouter:

import { BrowserRouter } from "react-router-dom";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
 
ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Damit aktivierst du das Routing für das gesamte Projekt.

In der Datei App.jsx legst du nun deine ersten Routen an:

import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
 
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}
 
export default App;

• <Routes> enthält alle Routen.
• Jede <Route> definiert einen Pfad und die zugehörige Komponente.

Erstelle die Seiten unter src/pages/:

Home.jsx

function Home() {
  return <h1>Startseite</h1>;
}
export default Home;

About.jsx

function About() {
  return <h1>Über uns</h1>;
}
export default About;

Benutze dafür <Link> statt <a>:

import { Link } from "react-router-dom";
 
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">Über uns</Link>
    </nav>
  );
}
 
export default Navbar;

<Route path="*" element={<h1>Seite nicht gefunden</h1>} />