React-Routing

React-Routing wird typischerweise mit der Bibliothek react-router implementiert, einer leistungsstarken Bibliothek zur Implementierung von clientseitigem Routing in React-Anwendungen. Im Folgenden wird ausführlich erklärt, wie man React Router in React verwendet:

React Router installieren

Zuerst müssen Sie das Paket react-router-dom installieren, das Paket, das zur Implementierung von Routing in Browserumgebungen verwendet wird.

npm install react-router-dom

Grundlegende Verwendung

Im Folgenden finden Sie die Schritte und Beispielcode zum Einrichten des grundlegenden Routings mit React Router.

1. Grundlegende Routenkomponenten erstellen

Erstellen Sie zunächst einige einfache Komponenten, die von den Routen gerendert werden.

Beispiel

import React from 'react';

const Home = () => {
  return <h2>Home</h2>;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
  return <h2>About</h2>;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
  return <h2>Contact</h2>;
};

export default Contact;

2. Routen einrichten

Verwende in deiner Hauptanwendungskomponente die Komponenten aus react-router-dom, um die Routen einzurichten.

Beispiel

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from 'react-router-dom';

import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Verschachtelte Routen

React Router ermöglicht es Ihnen, verschachtelte Routen zu erstellen, sodass Sie weitere Routen innerhalb einer Komponente rendern können.

Beispiel

// Dashboard.js
import React from 'react';
import { Link, Outlet } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <ul>
          <li>
            <Link to="profile">Profil</Link>
          </li>
          <li>
            <Link to="settings">Einstellungen</Link>
          </li>
        </ul>
      </nav>
      <Outlet />
    </div>
  );
};

export default Dashboard;

Beispiel

// Profile.js
import React from 'react';

const Profile = () => {
  return <h2>Profile</h2>;
};

export default Profile;

Beispiel

// Settings.js
import React from 'react';

const Settings = () => {
  return <h2>Settings</h2>;
};

export default Settings;

Richte verschachtelte Routen in der Hauptkomponente der Anwendung ein:

Beispiel

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from 'react-router-dom';

import Home from './Home';
import About from './About';
import Contact from './Contact';
import Dashboard from './Dashboard';
import Profile from './Profile';
import Settings from './Settings';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/dashboard" element={<Dashboard />}>
            <Route path="profile" element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
        </Routes>
      </div>
    </Router>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Dynamische Routen

Du kannst dynamische Parameter in den Pfad einbeziehen.

Beispiel

// User.js
import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
  const { userId } = useParams();
  return <h2>Benutzer-ID: {userId}</h2>;
};

export default User;

Dynamische Routen in der Hauptanwendungskomponente einrichten:

Beispiel

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from 'react-router-dom';

import Home from './Home';
import About from './About';
import Contact from './Contact';
import Dashboard from './Dashboard';
import Profile from './Profile';
import Settings from './Settings';
import User from './User';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
            <li>
              <Link to="/user/1">User 1</Link>
            </li>
            <li>
              <Link to="/user/2">User 2</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/dashboard" element={<Dashboard />}>
            <Route path="profile" element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
          <Route path="/user/:userId" element={<User />} />
        </Routes>
      </div>
    </Router>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

404-Seite

Sie können die von React Router bereitgestellte Navigate-Komponente verwenden, um Weiterleitungen für 404-Seiten zu implementieren.

Beispiel

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  Navigieren
} from 'react-router-dom';

import Home from './Home';
import About from './About';
import Contact from './Contact';
import Dashboard from './Dashboard';
import Profile from './Profile';
import Settings from './Settings';
import User from './User';

const NotFound = () => {
  return <h2>404 Seite nicht gefunden</h2>;
};

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
            <li>
              <Link to="/user/1">User 1</Link>
            </li>
            <li>
              <Link to="/user/2">User 2</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/dashboard" element={<Dashboard />}>
            <Route path="profile" element={<Profile />} />
            <Route path="settings" element={<Settings />} />
          </Route>
          <Route path="/user/:userId" element={<User />} />
          <Routenpfad="*" Element={<Navigieren zu="/" replace />} />
        </Routes>
      </div>
    </Router>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Zusammenfassung

Durch die Verwendung von React Router können Sie ganz einfach Routing-Funktionalität in React-Anwendungen implementieren, einschließlich grundlegendem Routing, verschachteltem Routing, dynamischem Routing und 404-Seiten, unter anderem. Auf diese Weise können Sie eine leistungsstarke und benutzerfreundliche Single-Page-Application (SPA) erstellen.

Andere Erweiterungen