Willkommen zurück zu unserer React-Reihe! In früheren Beiträgen haben wir wesentliche Konzepte wie Komponenten, Status, Requisiten und Ereignisbehandlung behandelt. Jetzt ist es an der Zeit, das Routing in React-Anwendungen mithilfe von React Router zu erkunden. Durch Routing können Sie zwischen verschiedenen Ansichten oder Komponenten innerhalb Ihrer App navigieren und so ein nahtloses Benutzererlebnis schaffen.

Was ist React Router?

React Router ist eine leistungsstarke Bibliothek, die Routing in React-Anwendungen ermöglicht. Sie können damit mehrere Routen in Ihrer Anwendung definieren und bestimmte Komponenten basierend auf dem URL-Pfad rendern. Diese Funktion ist entscheidend für die Erstellung von Single-Page-Anwendungen (SPAs), bei denen für die Navigation kein Neuladen der gesamten Seite erforderlich ist.

React Router installieren
Um zu beginnen, müssen Sie React Router installieren. Sie können dies mit npm:
tun.

npm install react-router-dom

Grundlegendes Routing einrichten

Lassen Sie uns eine einfache Anwendung mit mehreren Routen einrichten. Wir erstellen eine Anwendung mit einer Homepage, einer About-Seite und einer Kontaktseite.

1. Basiskomponenten erstellen
Erstellen Sie zunächst drei Komponenten: Startseite, Info und Kontakt.

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

const Home = () => {
    return 
Home Page
;
};

export default Home;

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

const About = () => {
    return 
About Page
;
};

export default About;

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

const Contact = () => {
    return 
Contact Page
;
};

export default Contact;

2. Richten Sie den Router ein
Nun richten wir den Router in Ihrer Hauptanwendungsdatei ein, normalerweise App.js.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
    return (
        
            
            
                
                
                
            
        
    );
};

export default App;

Erläuterung:

• Router: Die BrowserRouter-Komponente umschließt die gesamte Anwendung und ermöglicht so das Routing.
• Link: Die Link-Komponente wird verwendet, um Navigationslinks zu erstellen, die die URL ändern, ohne die Seite neu zu laden.
• Route: Die Route-Komponente definiert einen Pfad und die Komponente, die gerendert werden soll, wenn der Pfad übereinstimmt.
• Switch: Die Switch-Komponente stellt sicher, dass jeweils nur eine Route gerendert wird.

Navigieren zwischen Seiten
Nachdem die Einrichtung abgeschlossen ist, können Sie nun zwischen den Seiten „Startseite“, „Info“ und „Kontakt“ navigieren, indem Sie auf die Links im Navigationsmenü klicken. React Router verarbeitet die URL-Änderungen und rendert die entsprechende Komponente, ohne die Seite zu aktualisieren.

Routenparameter
Sie können Routen auch mit Parametern definieren und so dynamische Daten übergeben. Erstellen wir beispielsweise eine Benutzerkomponente, die Benutzerinformationen basierend auf der Benutzer-ID in der URL anzeigt.

1. Erstellen Sie die Benutzerkomponente
User.js:

import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
    const { userId } = useParams();
    return 
User ID: {userId}
;
};

export default User;

2. Aktualisieren Sie den Router
Fügen Sie eine Route für die Benutzerkomponente in Ihrem App.js hinzu:

Verschachtelte Routen

React Router unterstützt auch verschachtelte Routen, die es Ihnen ermöglichen, untergeordnete Routen innerhalb einer übergeordneten Komponente zu rendern. Dies ist nützlich für die Erstellung komplexer Layouts.

Beispiel für verschachtelte Routen:

1. Erstellen Sie eine Dashboard-Komponente mit verschachtelten Routen:

// Dashboard.js
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import Settings from './Settings';
import Profile from './Profile';

const Dashboard = () => {
    return (
        

            
Dashboard
            
            
                
                
            
        
    );
};

export default Dashboard;

1. Aktualisieren Sie Ihre App.js, um die Dashboard-Route einzuschließen:

Jetzt werden durch Navigieren zu /dashboard/profile oder /dashboard/settings die entsprechenden Komponenten im Dashboard gerendert.

In diesem Beitrag haben wir untersucht, wie man Routing in einer React-Anwendung mithilfe von React Router implementiert. Wir haben das Einrichten des grundlegenden Routings, das Navigieren zwischen Seiten, die Verwendung von Routenparametern und das Erstellen verschachtelter Routen behandelt.

Mit diesen Konzepten können Sie ein strukturiertes Navigationssystem für Ihre React-Anwendungen erstellen, das Benutzererlebnis verbessern und eine dynamische Inhaltswiedergabe ermöglichen.

Im nächsten Beitrag befassen wir uns mit der Verwendung von React Hooks und konzentrieren uns dabei auf useEffect und wie damit Nebenwirkungen in Funktionskomponenten verwaltet werden können. Bleiben Sie dran!