Reagieren Sie auf den Router ist Ihr unverzichtbares Werkzeug zum Erstellen von Single-Page-Anwendungen (SPAs). Stellen Sie sich vor, dass Benutzer mühelos zwischen Abschnitten wechseln und Ihre Website wie eine flüssige App erleben können. React Router macht dies möglich und ebnet den Weg für ein angenehmes Benutzererlebnis und eine moderne Webpräsenz. Eine React-Website sollte nicht bedeuten, dass eine große Seite jedes Mal neu geladen wird, wenn Benutzer navigieren.

Dieser Artikel hilft Ihnen beim Einstieg in die Welt von React Router und Sie erfahren mehr über das React Router-Konzept und seine Fähigkeiten. Bleiben Sie dran, um das Potenzial einer reibungslosen Navigation auszuschöpfen und Ihre React-Projekte auf die nächste Stufe zu heben!

Inhaltsverzeichnis

• Was ist ein React-Router?
• Schritte zur Verwendung von React Router
• React-Router-Komponenten
• React Router implementieren

Da es in React kein integriertes Routing gibt, ermöglicht der React JS Router Routing-Unterstützung in React und die Navigation zu verschiedenen Komponenten in mehrseitigen Anwendungen. Es rendert Komponenten für entsprechende Routen und zugewiesene URLs.

Was ist ein React-Router?

Reagieren Sie auf den Router ist eine Standardbibliothek zum Weiterleiten Reagieren . Es ermöglicht die Navigation zwischen Ansichten verschiedener Komponenten in einer React-Anwendung, ermöglicht das Ändern der Browser-URL und hält die Benutzeroberfläche mit der URL synchron. Lassen Sie uns eine einfache Anwendung für React erstellen, um zu verstehen, wie der React Router funktioniert. Der Antrag enthält drei Komponenten Heimkomponente , Die Über Komponente , und das Kontaktkomponente . Wir werden React Router verwenden, um zwischen diesen Komponenten zu navigieren.

Schritte zur Verwendung von React Router

Schritt 1: Initialisieren Sie ein Reaktionsprojekt. Überprüfen Sie diesen Beitrag auf Einrichten der React-App

Schritt 2: Installieren Sie React-Router in Ihrer Anwendung und schreiben Sie den folgenden Befehl in Ihr Terminal

npm i react-router-dom>

Schritt 3: React Router importieren

import { BrowserRouter, Routes, Route } from 'react-router-dom';>

Ordnerstruktur:

Die aktualisierten Abhängigkeiten in package.json Datei.

'dependencies': {  '@testing-library/jest-dom': '^5.17.0',  '@testing-library/react': '^13.4.0',  '@testing-library/user-event': '^13.5.0',  'react': '^18.2.0',  'react-dom': '^18.2.0',  'react-router-dom': '^6.22.1',  'react-scripts': '5.0.1',  'web-vitals': '^2.1.4' },>

React-Router-Komponenten

Die Hauptkomponenten von React Router sind:

• BrowserRouter : BrowserRouter ist eine Router-Implementierung, die die HTML5-Verlaufs-API (pushState, replaceState und das Popstate-Ereignis) verwendet, um Ihre Benutzeroberfläche mit der URL synchron zu halten. Es ist die übergeordnete Komponente, die zum Speichern aller anderen Komponenten verwendet wird.
• Routen : Es handelt sich um eine neue Komponente, die in Version 6 eingeführt wurde, und um ein Upgrade der Komponente. Die Hauptvorteile von Routes gegenüber Switch sind:
  • Relative s und s
  • Routen werden auf der Grundlage der besten Übereinstimmung ausgewählt, anstatt der Reihe nach durchlaufen zu werden.
• Route: Route ist die bedingt angezeigte Komponente, die eine Benutzeroberfläche rendert, wenn ihr Pfad mit der aktuellen URL übereinstimmt.
• Verknüpfung: Die Link-Komponente wird verwendet, um Links zu verschiedenen Routen zu erstellen und die Navigation rund um die Anwendung zu implementieren. Es funktioniert wie ein HTML-Anker-Tag.

React Router implementieren

Beispiel: Dieses Beispiel zeigt die Navigation mit „react-router-dom“ zu den Komponenten „Home“, „Info“ und „Kontakt“.

// Filename - App.js import React, { Component } from 'react'; import {  BrowserRouter as Router,  Routes,  Route,  Link, } from 'react-router-dom'; import Home from './component/home'; import About from './component/about'; import Contact from './component/contact'; import './App.css'; class App extends Component {  render() {  return (    
  
  
  Heim  
  
  Über uns  
  
  Kontaktiere uns  
  
    }>  }>  }>    
  );  } } Standard-App exportieren;>

// Filename - component/home.js import React from 'react'; function Home() {  return 
Willkommen in der Welt der Geeks!
; } Standard-Home exportieren;>

// Filename - component/about.js import React from 'react'; function About() {  return (  
  
techcodeview.com ist ein Informatikportal für Geeks!
Lesen Sie mehr über uns unter:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Hier finden Sie uns: 
techcodeview.com 
5. und 6. Etage, Royal Kapsons, A-118, 
Sektor - 136, Noida, Uttar Pradesh (201305)
); } Standardkontakt exportieren;>
  
    Schritt zum Ausführen der Anwendung:    Öffnen Sie das Terminal und geben Sie den folgenden Befehl ein.
 
npm start>
    Ausgabe:    Öffnen Sie den Browser und unser Projekt wird in der URL angezeigt      http://localhost:3000/      . Jetzt können Sie auf die Links klicken und zu verschiedenen Komponenten navigieren. React Router synchronisiert die Benutzeroberfläche Ihrer Anwendung mit der URL.
  
Schließlich haben wir die Navigation mithilfe von React Router erfolgreich in unserer React-Anwendung implementiert.