React-Navigationstutorial | React Router | Clientseitiges Routing

Einführung

In diesem Projekt lernst du, wie du Navigationsfunktionen in einer React-Anwendung implementierst. Du wirst eine einfache Anwendung mit einer Navigationsleiste und Seiten erstellen, zu denen über Links navigiert werden kann.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du das Projekt einrichtest und Abhängigkeiten installierst
Wie du Routen und Routematcher hinzufügst, um die Navigation der Menüs in der Navigationsleiste zu ermöglichen
Wie du Navigation von der Kartenliste zu einzelnen Karten hinzufügst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

React Router zum Verarbeiten der Client-Seiten-Routing zu verwenden
Links zu erstellen und zwischen verschiedenen Seiten in einer React-Anwendung zu navigieren
Daten zwischen Komponenten über das state-Objekt in React Router zu übergeben

Projekt einrichten

In diesem Schritt lernst du, wie du das Projekt einrichtest und die erforderlichen Abhängigkeiten installierst.

Öffne deinen Code-Editor und navigiere zum Projektverzeichnis.

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── components
│   │   ├── Card.js
│   │   ├── Cards.js
│   │   └── Home.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

Als Nächstes lade die Abhängigkeiten mit dem Befehl npm install im Terminal herunter, warte, bis die Abhängigkeiten heruntergeladen sind, und starte dann das Projekt mit dem Befehl npm start.

Sobald das Projekt erfolgreich gestartet ist, klicke auf "Web 8080", um es in deinem Browser zu previewen.

Routen und Routematcher hinzufügen

In diesem Schritt lernst du, wie du Routen und Routematcher hinzufügst, um die Navigation der Menüs in der Navigationsleiste zu ermöglichen.

Öffne die Datei src/index.js und importiere die erforderlichen Module:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

Umhülle den App-Komponenten mit der BrowserRouter-Komponente:

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Öffne die Datei src/App.js und importiere die erforderlichen Komponenten und Module:

import React from "react";
import { Route, Switch, Link } from "react-router-dom";
import { Home } from "./components/Home";
import { Cards } from "./components/Cards";
import { Card } from "./components/Card";
import "./App.css";

Füge das Navigationsmenü und die Switch-Komponente hinzu, um die verschiedenen Routen zu verarbeiten:

const App = () => {
  return (
    <div className="app">
      <header>
        <Link to="/" className="menu menu-1">
          Startseite
        </Link>
        <Link to="/cards" className="menu menu-2">
          Kartenseite
        </Link>
      </header>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/cards" exact component={Cards} />
        <Route path="/cards/:id" component={Card} />
      </Switch>
    </div>
  );
};

Die Switch-Komponente stellt sicher, dass nur eine Route zur selben Zeit gerendert wird, und die Route-Komponenten definieren die verschiedenen Routen und die zugehörigen Komponenten, die gerendert werden sollen.

In diesem Schritt lernst du, wie du Code hinzufügst, um von der Kartenlistenseite zu den einzelnen Kartenseiten zu springen.

Öffne die Datei src/components/Cards.js und importiere die erforderlichen Module:
```
import React from "react";
import { Link } from "react-router-dom";
```

Füge den Code hinzu, um die Kartenliste mit Links zu den einzelnen Kartenseiten zu rendern:

export const Cards = () => {
  const colors = ["#26547c", "#ef476f", "#ffd166", "#06d6a0"];

  return (
    <div className="page cards">
      {colors.map((c, idx) => {
        return (
          <Link
            key={idx}
            to={{
              pathname: `/cards/${idx + 1}`,
              state: { bgColor: c }
            }}
          >
            <div
              className={`card card-${idx + 1}`}
              style={{ backgroundColor: c }}
            >
              Karte {idx + 1}
            </div>
          </Link>
        );
      })}
    </div>
  );
};

Die Link-Komponente wird verwendet, um Links zu den einzelnen Kartenseiten zu erstellen, und der to-Prop wird verwendet, um den Pfad und den Zustand anzugeben, der an die Card-Komponente übergeben werden soll.

Öffne die Datei src/components/Card.js und importiere die erforderlichen Module:

import React from "react";
import { useParams, useLocation } from "react-router-dom";

Füge den Code hinzu, um die einzelne Kartenseite zu rendern:
```
export const Card = () => {
  const { id } = useParams();
  const { state } = useLocation();

  return (
    <div
      className="page card-page"
      style={{ backgroundColor: state.bgColor }}
    >
      <p>Karte {id}</p>
    </div>
  );
};
```
Der useParams-Hook wird verwendet, um den id-Parameter aus der URL abzurufen, und der useLocation-Hook wird verwendet, um das state-Objekt abzurufen, das von der Cards-Komponente übergeben wurde.

Jetzt hast du das Projekt abgeschlossen. Das fertige Ergebnis ist in dem folgenden Screenshot zu sehen. Klicken auf die Kartenseite bringt dich zur Kartenliste, und klicken auf jede Karte bringt dich zur einzelnen Kartenseite.