Eine Single Page Application (SPA) ist eine Website oder Webanwendung, die eine vorhandene Webseite dynamisch mit neuen Informationen vom Webserver umschreibt.
In einer React-Anwendung rufen Komponenten Website-Inhalte ab und rendern sie in eine einzelne HTML-Datei in Ihrem Projekt.
React Router hilft Ihnen bei der Navigation zur Komponente Ihrer Wahl und rendert sie in der HTML-Datei. Um es zu verwenden, müssen Sie wissen, wie Sie React Router einrichten und in Ihre React-Anwendung integrieren.
So installieren Sie den React-Router
So installieren Sie React Router in Ihrem React-Projekt mit npm, der JavaScript-Paketmanager, Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus:
npm ich reagiere-router-dom
Alternativ können Sie das Paket mit Yarn herunterladen, einem Paketmanager, mit dem Sie Bibliothekspakete offline installieren können.
Um React Router mit Yarn zu installieren, führen Sie diesen Befehl aus:
Garn hinzufügen React-Router-Dom@6
React-Router einrichten
Um React Router zu konfigurieren und in Ihrer Anwendung verfügbar zu machen, importieren Sie BrowserRouter aus reagieren-router-dom in deinem index.js -Datei, und schließen Sie dann Ihre App-Komponente in die BrowserRouter Element:
importieren Reagieren aus'reagieren';
importieren ReactDOM aus'react-dom/client';
importieren App aus'./App';
importieren {BrowserRouter} aus'reagieren-router-dom';konst root = ReactDOM.createRoot( dokumentieren.getElementById('Wurzel') );
root.render(
</BrowserRouter>
);
Umschließen der App-Komponente in der BrowserRouter -Element gibt der gesamten App vollen Zugriff auf die Fähigkeiten des Routers.
Routing zu anderen Komponenten
Nachdem Sie Ihren Router in Ihrer Anwendung eingerichtet haben, sollten Sie Ihre App-Komponenten erstellen, weiterleiten und rendern. Der folgende Code importiert und erstellt Komponenten mit den Namen „Home“, „About“ und „Blog“. Es importiert auch die Route Und Routen Elemente aus reagieren-router-dom.
Sie werden Ihre Routen innerhalb der definieren App Komponente:
importieren { Routen, Route } aus'reagieren-router-dom';
importieren Heim aus'./Heim';
importieren Um aus'./Um';
importieren Bloggen aus'./Blog';FunktionApp() {
zurückkehren (
'/' element={ } />
'/um' element={ } />
'/blog' element={ }/>
</Routes>
)
}
ExportStandard Anwendung;
Der App Die Komponente ist die Hauptkomponente, die den gesamten Code rendert, den Sie in Ihren anderen Komponenten geschrieben haben.
Der Routen element ist das übergeordnete Element, das die einzelnen Routen umschließt, die Sie in Ihrer App-Komponente erstellen. Der Route -Element erstellt eine einzelne Route. Es braucht zwei Prop-Attribute: a Weg und ein Element.
Der Weg -Attribut definiert den URL-Pfad der beabsichtigten Komponente. Die erste Route im obigen Codeblock verwendet einen umgekehrten Schrägstrich (/) als Pfad. Dies ist eine spezielle Route, die React zuerst rendern wird, also die Heim Komponente rendert, wenn Sie Ihre Anwendung ausführen. Verwechseln Sie dieses System nicht mit Implementieren von bedingtem Rendering in Ihren React-Komponenten. Das kannst du geben Weg Ordnen Sie einen beliebigen Namen zu.
Der Element -Attribut definiert die Komponente, die die Route wird rendern.
Der Verknüpfung Die Komponente ist eine React Router-Komponente, die zum Navigieren auf verschiedenen Routen verwendet wird. Diese Komponenten greifen auf die verschiedenen Routen zu, die Sie erstellt haben.
Zum Beispiel:
importieren { Verknüpfung } aus'reagieren-router-dom';FunktionHeim() {
zurückkehren (
'/um'>Über Seite</Link>
'/blog'>Blogseite</Link>Dies ist die Startseite
</div>
)
}
ExportStandard Heim;
Der Verknüpfung -Komponente ist nahezu identisch mit dem HTML-Anchor-Tag, es verwendet nur ein Attribut namens "to" anstelle von "href". Der Verknüpfung Die Komponente navigiert zur Route mit dem entsprechenden Pfadnamen als Attribut und rendert die Komponente der Route.
Verschachteltes Routing und wie man es implementiert
Der React-Router unterstützt verschachteltes Routing, sodass Sie mehrere Routen in eine einzige Route zusammenfassen können. Dies wird hauptsächlich verwendet, wenn die URL-Pfade der Routen eine gewisse Ähnlichkeit aufweisen.
Nachdem Sie die Komponenten erstellt haben, die Sie routen möchten, entwickeln Sie individuelle Routen für jede von ihnen im App Komponente.
Zum Beispiel:
importieren { Routen, Route } aus'reagieren-router-dom';
importieren Artikel aus'./Artikel';
importieren Neuer Artikel aus'./Neuer Artikel';
importieren ArtikelEins aus'./ArtikelEins';FunktionApp() {
zurückkehren ('/Artikel' element={ }/> '/artikel/neu' element={ }/> '/Artikel 1' element={ }/>
</Routes>
)
}
ExportStandard Anwendung;
Der obige Codeblock importiert und leitet die erstellten Komponenten weiter Artikel, Neuer Artikel, Und ArtikelEins. Es gibt einige Ähnlichkeiten in den URL-Pfaden zwischen den drei Routen.
Der Neuer Artikel Der Pfadname der Route beginnt genauso wie die Artikel Der Pfadname der Route mit einem hinzugefügten Backslash (/) und dem Wort „new“, d. h. (/new). Der einzige Unterschied zwischen den Pfadnamen der Artikel Strecke und die ArtikelEins Route ist der Schrägstrich (/1) am Ende der ArtikelEins Pfadname der Komponente.
Sie können die drei Routen verschachteln, anstatt sie in ihrem aktuellen Zustand zu belassen.
So:
importieren { Routen, Route } aus'reagieren-router-dom';
importieren Artikel aus'./Artikel';
importieren Neuer Artikel aus'./Neuer Artikel';
importieren ArtikelEins aus'./ArtikelEins';FunktionApp() {
zurückkehren ('/Artikel'>
}/>'/artikel/neu' element={ }/> '/Artikel 1' element={ }/>
</Route>
</Routes>
)
}
ExportStandard Anwendung;
Sie haben die drei einzelnen Routen in eine einzige verpackt Route Element. Beachten Sie, dass die Eltern Route Element hat nur die Weg Attribut und Nr Element -Attribut, das die zu rendernde Komponente definiert. Der Index Attribut im ersten Kind Route -Element gibt an, dass dies Route rendert, wenn Sie zum URL-Pfad des übergeordneten Elements navigieren Route.
Um Ihren Code besser und wartbarer zu machen, sollten Sie Ihre Routes in einer Komponente definieren und in die importieren App Komponente zum Einsatz.
Zum Beispiel:
importieren { Routen, Route } aus'reagieren-router-dom';
importieren Artikel aus'./Artikel';
importieren Neuer Artikel aus'./Neuer Artikel';
importieren ArtikelEins aus'./ArtikelEins';FunktionArtikelRouten() {
zurückkehren (
}/>'/artikel/neu' element={ }/> '/Artikel 1' element={ }/>
</Routes>
)
}
ExportStandard ArtikelRouten;
Die Komponente im obigen Codeblock enthält die verschachtelten Routen, die früher in der App-Komponente enthalten waren. Nachdem Sie die Komponente erstellt haben, sollten Sie sie in die importieren App Komponente und routen Sie sie mit einem einzigen Route Element.
Zum Beispiel:
importieren { Routen, Route } aus'reagieren-router-dom';
importieren ArtikelRouten aus'./ArtikelRouten';FunktionApp() {
zurückkehren ('/Artikel/*' element={ }>
</Routes>
)
}
ExportStandard Anwendung;
Im Finale Route Komponente stellen die hinzugefügten Backslash- und Sternchen-Symbole am Ende des Pfadnamens der Route sicher, dass der Pfadname jedem Pfadnamen entspricht, der mit beginnt (/Artikel).
React Router hat noch mehr zu bieten
Sie sollten jetzt mit den Grundlagen zum Erstellen von Single-Page-Anwendungen in React.js mit React Router vertraut sein.
In der React Router-Bibliothek sind viele weitere Funktionen verfügbar, die das Entwicklererlebnis beim Erstellen von Webanwendungen dynamischer machen.
