React Router ist eine Standardbibliothek für das Routing in React. Es ermöglicht die Navigation zwischen Ansichten verschiedener Komponenten in einer React-Anwendung, ermöglicht die Änderung der Browser-URL und hält die Benutzeroberfläche mit der URL synchron.
Java-Boolean in String umwandeln
Um zu verstehen, wie React Router funktioniert, erstellen wir eine einfache Anwendung für React. Die Anwendung umfasst die Komponenten „Home“, „Info“ und „Kontakt“. Wir werden React Router verwenden, um zwischen diesen Komponenten zu navigieren.
npx create-react-app
Ihre Entwicklungsumgebung ist bereit. Lassen Sie uns nun React Router in unserer Anwendung installieren.
Reagieren Sie auf den Router : React Router kann über npm in Ihrer React-Anwendung installiert werden. Führen Sie die folgenden Schritte aus, um den Router in Ihrer React-Anwendung einzurichten:
Schritt 1: CD in Ihrem Projektverzeichnis, d.h ., Java.
Schritt 2: Verwenden Sie den folgenden Befehl, um React Router zu installieren:
npm install - -save reagieren-router-dom
Fügen Sie nach der Installation von „react-router-dom“ seine Komponenten zu Ihrer React-Anwendung hinzu.
Hinzufügen von React Router-Komponenten:
Die Hauptkomponenten von React Router sind:
Anstatt nacheinander zu durchlaufen, werden die Routen auf der Grundlage der besten Übereinstimmung ausgewählt.
Um React Router-Komponenten zu Ihrer Anwendung hinzuzufügen, öffnen Sie Ihr Projektverzeichnis in dem von Ihnen verwendeten Editor und gehen Sie zur Datei app.js. Fügen Sie nun den folgenden Code zu app.js hinzu.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Hinweis: BrowserRouter wird als Router bezeichnet.
Verwenden des React Routers: Um React Router zu verwenden, erstellen wir zunächst einige Komponenten in der React-Anwendung. Erstellen Sie in Ihrem Projektverzeichnis einen Ordner mit dem Namen „components“ im Ordner „src“ und fügen Sie nun drei Dateien mit den Namen „home.js“, „about.js“ und „contact.js“ im Ordner „components“ hinzu.
Fügen wir unseren drei Komponenten etwas Code hinzu:
Home.js:
import React from 'react'; function Home (){ return } export default Home; About.js:
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; Contact.js:
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; Fügen wir nun die React Router-Komponenten in die Anwendung ein:
BrowserRouter : Fügen Sie einen BrowserRouter mit Alias als Router zu Ihrer app.js-Datei hinzu, um alle anderen Komponenten einzuschließen. BrowserRouter ist eine übergeordnete Komponente und kann nur ein untergeordnetes Element haben.
class App extends Component { render() { return ( ); } } Links: Lassen Sie uns nun die Verknüpfungen unserer Komponenten erstellen. Die Link-Komponente verwendet Requisiten, um den Ort zu beschreiben, zu dem der Link navigieren soll.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Führen Sie nun Ihre Anwendung auf dem lokalen Host aus und klicken Sie auf den erstellten Link. Sie werden feststellen, dass sich die URLs je nach Wert der Linkkomponente ändern.
Route : Die Route-Komponente hilft uns, die Verbindung zwischen der Benutzeroberfläche der Komponente und der URL herzustellen. Um die Route in die Anwendung einzubinden, fügen Sie den folgenden Code zu Ihrer app.js hinzu.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Die Komponenten sind nun verbunden und durch Klicken auf einen beliebigen Link wird die entsprechende Komponente gerendert. Versuchen wir nun, die mit der Root-Komponente verbundenen Requisiten zu verstehen.
- Element bezieht sich auf die Komponente, die gerendert wird, wenn der Pfad übereinstimmt.
Hinweis: Standardmäßig sind Routen inklusiv, was bedeutet, dass mehr als eine Routenkomponente einem URL-Pfad entsprechen und gleichzeitig gerendert werden kann. Wenn wir eine einzelne Komponente rendern möchten, müssen wir hier Routen verwenden.
Routen : Um eine einzelne Komponente zu lesen, schließen Sie alle Routen in die Routes-Komponente ein.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Wechseln Sie Gruppen über mehrere Routen hinweg, durchlaufen Sie sie und finden Sie die erste, die dem Pfad entspricht. Somit wird die entsprechende Komponente des Pfades gerendert.
Hier ist unser vollständiger Quellcode nach dem Hinzufügen aller Komponenten:
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> Jetzt können Sie auf den Link klicken und durch die 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.
A, das die HTML5-Verlaufs-API (Pushstate-, Replacementstate- und Popstate-Ereignisse) verwendet, um Ihre Benutzeroberfläche mit der URL synchron zu halten.
Basisname: Zeichenfolge
Basis-URL für alle Standorte. Wenn Ihre App von einem Unterverzeichnis auf Ihrem Server bereitgestellt wird, sollten Sie sie auf dieses Unterverzeichnis festlegen. Ein korrekt formatierter Basisname muss einen führenden Schrägstrich, aber keinen abschließenden Schrägstrich enthalten.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: func
Eine Funktion zur Bestätigung der Navigation. Standardmäßig wird window.confirm verwendet.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Wenn „true“, verwendet der Router ganzseitige Aktualisierungen der On-Page-Navigation. Möglicherweise möchten Sie damit nachahmen, wie eine herkömmliche, vom Server gerenderte App mit ganzseitigen Aktualisierungen zwischen der Seitennavigation funktionieren würde.
keyLength: Zahl
Die Länge des Standorts. Schlüssel. Standardmäßig ist 6.
Kinder: Knoten- Untergeordnetes Element zum Rendern.
Hinweis: Bei React müssen Sie ein einzelnes untergeordnetes Element verwenden, da die Render-Methode nicht mehr als ein Element zurückgeben kann. Wenn Sie mehr als ein Element benötigen, können Sie versuchen, diese in ein zusätzliches oder einzuschließen.
A, das den Hash-Teil der URL (d. h. window.location.hash) verwendet, um Ihre Benutzeroberfläche mit der URL synchron zu halten.
Hinweis: Der Hash unterstützt den Speicherort des Verlaufs nicht. Schlüssel oder Standort. Zustand. In früheren Versionen haben wir versucht, das Verhalten zu reduzieren, aber es gab Randfälle, die wir nicht lösen konnten. Jeder Code oder jedes Plugin, das dieses Verhalten erfordert, funktioniert nicht.
Da diese Technologie nur ältere Browser unterstützen soll, empfehlen wir Ihnen, stattdessen Ihren Server so zu konfigurieren, dass er damit funktioniert.
Basisname: Zeichenfolge
Die Basis-URL für alle Standorte. Ein korrekt formatierter Basisname sollte einen führenden Schrägstrich, aber keinen abschließenden Schrägstrich haben.
Git, füge alles hinzu
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: func
Eine Funktion zur Bestätigung der Navigation. Standardmäßig wird window.confirm verwendet.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: string
Die verwendete Codierung für window.location.hash . Verfügbare Werte sind:
- „Schrägstrich“ – erstellt Hashes wie #/ und #/sunshine/lollipops
- 'noslash' - # und #sunshine/lollipops . wie Hash erstellt
- „hashbang“ – erstellt „ajax crawlbare“ (von Google veraltete) Hashes wie #!/ und #!/sunshine/lollipops
Standardmäßig ist „Schrägstrich“.
Kinder: Knoten
Ein einzelnes untergeordnetes Element zum Rendern.
Bietet deklarative, barrierefreie Navigation rund um Ihre Anwendung.
About
zu: string
Eine Zeichenfolgendarstellung eines Link-Speicherorts wird durch die Kombination der Pfadnamen-, Such- und Hash-Eigenschaften des Speicherorts erstellt.
Ein Objekt, das eine der folgenden Eigenschaften haben kann:
zu: func
Eine Funktion, bei der der aktuelle Standort als Argument übergeben wird und die die Standortdarstellung als Zeichenfolge oder Objekt zurückgeben muss.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> ersetzen: bool
Bei „true“ wird durch Klicken auf den Link der aktuelle Eintrag ersetzt, anstatt einen neuen hinzuzufügen
entry to the history stack.
interne Referenz: func
Ab React Router 5.1 sollten Sie diese Requisite nicht mehr benötigen, wenn Sie React 16 verwenden, da wir den Ref an das zugrunde liegende weiterleiten . Verwenden Sie stattdessen eine normale Referenz.
Ermöglicht den Zugriff auf die integrierte Referenz der Komponente.
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
mycricketlive
Ab React Router 5.1 sollten Sie diese Requisite nicht mehr benötigen, wenn Sie React 16 verwenden, da wir den Ref an das zugrunde liegende weiterleiten . Verwenden Sie stattdessen eine normale Referenz.
Rufen Sie mit React.createRef die zugrunde liegende Referenz der Komponente ab.
let anchorRef = React.createRef()
Komponente: React.Component
Wenn Sie Ihre eigene Navigationskomponente verwenden möchten, können Sie dies tun, indem Sie sie über die Komponentenstütze übergeben.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Sie können auch Requisiten weitergeben, auf denen Sie gerne vertreten sein möchten wie Titel, ID, Klassenname usw.
Eine spezielle Version davon fügt dem gerenderten Element Stilattribute hinzu, wenn es mit einer vorhandenen URL übereinstimmt.
About
Klassenname: string | Funktion
className kann entweder eine Zeichenfolge oder eine Funktion sein, die eine Zeichenfolge zurückgibt. Bei Verwendung der Funktion className wird der aktive Zustand des Links als Parameter übergeben. Dies ist hilfreich, wenn Sie einen Klassennamen ausschließlich auf einen inaktiven Link anwenden möchten.
'nav-link' + (!isActive ? ' unselected' : '') } >
FAQs
In React Router v6 wird activeClassName entfernt und Sie sollten die Funktion className verwenden, um den Klassennamen auf aktive oder inaktive NavLink-Komponenten anzuwenden.
ActiveClassName: String
Klasse, um das Element anzugeben, wenn es aktiv ist. Die standardmäßig angegebene Klasse ist aktiv. Es wird mit der Klassennamen-Requisite kombiniert.
Stil: Objekt | Funktion
style kann entweder ein React.CSSProperties-Objekt oder eine Funktion sein, die ein Style-Objekt zurückgibt. Bei Verwendung des Funktionsstils wird der aktive Zustand des Links als Parameter übergeben.
({ color: isActive ? 'green' : 'blue' })} > In React Router v6 wird der aktive Stil entfernt und Sie müssen den Funktionsstil verwenden, um Inline-Stile auf aktive oder inaktive NavLink-Komponenten anzuwenden.
Aktiver Stil: Objekt
Die Stile, die auf das Element angewendet werden, wenn es aktiv ist.
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> streng: bool
Bei „true“ wird der abschließende Schrägstrich im Pfadnamen eines Standorts berücksichtigt, wenn ermittelt wird, ob der Standort mit der aktuellen URL übereinstimmt. Weitere Einzelheiten finden Sie in der Dokumentation.
Events
isActive: func
Eine Funktion zum Hinzufügen zusätzlicher Logik, um festzustellen, ob der Link aktiv ist. Dies sollte verwendet werden, wenn Sie mehr als nur überprüfen möchten, ob der Pfadname des Links mit dem Pfadnamen der aktuellen URL übereinstimmt.
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 Ort: Objekt
isActive Vergleicht mit dem aktuellen Verlaufsort (normalerweise der aktuellen Browser-URL).
aria-current: string
Der Wert des Attributs „area-current“, das für den aktiven Link verwendet wird. Verfügbare Werte sind:
- „Seite“ – wird verwendet, um einen Link innerhalb einer Reihe von Paginierungslinks anzugeben
- „Schritte“ – wird verwendet, um einen Link innerhalb der Schrittanzeige für einen schrittbasierten Prozess anzuzeigen
- „Standort“ – wird verwendet, um ein Bild anzugeben, das als aktuelle Komponente des Flussdiagramms visuell hervorgehoben wird
- „Datum“ – wird verwendet, um das aktuelle Datum im Kalender anzuzeigen
- „Zeit“ – wird verwendet, um die aktuelle Zeit innerhalb eines Stundenplans anzuzeigen
- „true“ – wird verwendet, um anzugeben, ob NavLink aktiv ist
- „false“ – wird verwendet, um zu verhindern, dass unterstützende Technologien auf den aktuellen Link reagieren (ein Anwendungsfall wäre, mehrere bereichsaktuelle Tags auf einer Seite zu verhindern)