Wie installiere ich react router dom

React Router ist eine Navigationsbibliothek für React, mit der Sie das Routing einer Webanwendung steuern können. Eines der beliebtesten React-Router-Pakete ist das react-router-dom. Es bietet die gesamte Funktionalität von React Router zusammen mit zusätzlichen Funktionen für die Arbeit mit einem Webbrowser. Um das react-router-dom in Ihrem Projekt zu verwenden, müssen Sie es installieren und verbinden.

Die Installation von react-router-dom ist sehr einfach. Stellen Sie zunächst sicher, dass Sie Node bereits installiert haben.js und npm. Öffnen Sie dann die Konsole und führen Sie den Befehl aus:

npm install react-router-dom

Nachdem die Installation abgeschlossen ist, können Sie mit dem react-router-dom in Ihrem Projekt beginnen. Importieren Sie die erforderlichen Komponenten aus dem react-router-dom und beginnen Sie mit der Erstellung von Routen für Ihre Anwendung!

Erste Schritte mit dem React Router DOM

Um mit der Arbeit zu beginnen React Router DOM Sie müssen es zuerst mit dem Batch-Manager installieren npm.

Öffnen Sie eine Eingabeaufforderung, und führen Sie den folgenden Befehl aus:

npm install react-router-dom

Nachdem Sie die Bibliothek installiert haben, müssen Sie die erforderlichen Komponenten in Ihr Projekt importieren:

BrowserRouter - eine Komponente, die Ihre gesamte React-Anwendung umschließt und die Verwendung von Routing ermöglicht.

Route - eine Komponente, die eine bestimmte Route definiert und mit einer bestimmten Komponente verknüpft.

Switch - eine Komponente, die alle Routen umschließt und es Ihnen ermöglicht, nur eine übereinstimmende Route auszuwählen, die angezeigt werden soll.

Als nächstes müssen Sie Ihre Routen innerhalb der Komponente definieren, die Sie mit einwickeln BrowserRouter.

Sie können eine Komponente verwenden Route und geben Sie den Pfad und die Komponente an, die angezeigt werden sollen, wenn der Pfad übereinstimmt:

Wenn der Benutzer zum Pfad "/about" navigiert, wird die Komponente angezeigt AboutComponent.

Sie können auch einen optionalen Parameter verwenden exact, um anzugeben, dass der Pfad vollständig übereinstimmen muss:

Wenn der Benutzer zur Startseite navigiert, wird die Komponente angezeigt HomeComponent.

Wickeln Sie alle Routen in eine Komponente ein Switch, um nur eine übereinstimmende Route auszuwählen:

Jetzt können Sie Routing in Ihrer React-Anwendung verwenden React Router DOM.

Installieren des React Router Dom über den Batch-Manager

Sie können den npm- oder Yarn-Batch-Manager verwenden, um das React Router Dom in Ihrem Projekt zu installieren. In diesem Abschnitt werden wir uns mit der Installation über npm befassen.

1. Öffnen Sie eine Eingabeaufforderung oder ein Terminal in Ihrem Projektordner.

2. Führen Sie den folgenden Befehl aus:

npm install react-router-dom

3. Warten Sie, bis npm alle erforderlichen Pakete und Abhängigkeiten herunterlädt.

Nach Abschluss dieser Schritte wird das React Router Dom erfolgreich in Ihrem Projekt installiert und ist einsatzbereit.

Denken Sie neben der Installation des Hauptpakets auch daran, die Abhängigkeiten React und ReactDOM zu installieren, wenn sie nicht bereits in Ihrem Projekt installiert sind.

Jetzt können Sie das React-Router-Dom verwenden, um das Routing Ihrer React-Anwendung zu erstellen und die Navigation zwischen verschiedenen Seiten zu steuern.

Verbinden des React Router Dom mit einem Projekt

Um das React Router Dom mit Ihrem Projekt zu verbinden, müssen Sie die folgenden Schritte ausführen:

1. Installieren Sie React-Router-Dom mit npm oder yarn mit dem Befehl: npm install react-router-dom yarn add react-router-dom yarn add react-router-dom
2. Importieren Sie die erforderlichen Komponenten aus dem React Router Dom in die Projektdatei: import < BrowserRouter as Router, Route, Link >from 'react-router-dom';
3. Wickeln Sie Ihre Stammkomponente (normalerweise als "App" bezeichnet) in eine Komponente ein . Beispiel: ReactDOM.render( , document.getElementById('root') );
4. Definieren Sie Ihre Routen mithilfe der Komponente . Beispiel: />/>/>
5. Erstellen Sie eine Navigationsleiste (oder ein Menü) mit einer Komponente . Ein Beispiel: HomeAboutContact

Nachdem Sie diese Schritte ausgeführt haben, können Sie das React Router Dom in Ihrem Projekt verwenden, um Routing zu erstellen und zwischen den verschiedenen Seiten der Anwendung zu navigieren.

Konfigurieren von Routen in der App

Führen Sie die folgenden Schritte aus, um Routen in Ihrer Anwendung mit dem React Router DOM zu konfigurieren:

1. Installieren der React Router DOM-Bibliothek: Zuerst müssen Sie die React Router DOM-Bibliothek mit dem npm- oder yarn-Batch-Manager installieren. Führen Sie den Befehl aus:

npm install react-router-dom

yarn add react-router-dom

1. Komponenten importieren: Als nächstes müssen Sie die erforderlichen Komponenten aus der React Router DOM-Bibliothek importieren. Sie können beispielsweise Komponenten importieren BrowserRouter, Route und Switch wie folgt:

import < BrowserRouter, Route, Switch >from 'react-router-dom';

1. App-Wrapper: Dann müssen Sie die Wurzelkomponente Ihrer Anwendung in eine Komponente umschließen BrowserRouter um Routing zu verwenden. Wenn beispielsweise in Ihrer Anwendung die Stammkomponente eine Komponente ist App, dann in der Datei index.js sie können Folgendes tun:

import React from 'react';import ReactDOM from 'react-dom';import App from './App';import < BrowserRouter >from 'react-router-dom';ReactDOM.render(,document.getElementById('root'));

1. Routen einrichten: Innerhalb der Komponente App sie können Routen mit einer Komponente anpassen Switch und Komponenten Route. Sie können beispielsweise zwei Komponenten erstellen: Home und About, und konfigurieren Sie ihre Routen wie folgt:

import React from 'react';import < Switch, Route >from 'react-router-dom';import Home from './Home';import About from './About';const App = () =>  /> />