Share
In diesem Lernprogramm erfahren Sie, wie Sie mit den Reakt-Router- und Reakt-Übergangsgruppen-Modulen mehrseitige React-Anwendungen mit Seitenübergangsanimationen erstellen.
Wenn Sie jemals die Gelegenheit hatten, React zu testen, haben Sie wahrscheinlich von der Create-React-App Paket, das es sehr einfach macht, mit einer React-Entwicklungsumgebung zu beginnen.
In diesem Lernprogramm verwenden wir dieses Paket, um unsere React-App zu starten.
Stellen Sie daher zunächst sicher, dass Node.js auf Ihrem Computer installiert ist. Es wird auch npm für Sie installieren.
Führen Sie in Ihrem Terminal aus npm install -g create -react-app. Dies wird global installiert Create-React-App auf deinem Computer.
Sobald dies geschehen ist, können Sie durch Eingabe überprüfen, ob es dort ist Create-React-App -V.
Nun ist es an der Zeit, unser React-Projekt aufzubauen. Renn einfach Mehrseiten-App für create -react-app. Sie können natürlich ersetzen Mehrseiten-App mit allem was du willst.
Jetzt, Create-React-App erstellt einen Ordner mit dem Namen Mehrseiten-App. Schreib einfach CD-Mehrseiten-App Verzeichnis wechseln, und jetzt ausführen npm starten um einen lokalen Server zu initialisieren.
Das ist alles. Sie haben eine React-App, die auf Ihrem lokalen Server ausgeführt wird.
Jetzt ist es Zeit, die Standarddateien zu säubern und unsere Anwendung vorzubereiten.
In deiner src Ordner löschen, aber alles löschen App.js und index.js. Dann öffnen index.js und ersetzen Sie den Inhalt durch den nachstehenden Code.
import Reagieren von 'Reagieren'; importiere ReactDOM von 'reag-dom'; App aus './App' importieren; ReactDOM.render (, document.getElementById ('root'));
Ich habe im Grunde das gelöscht registerServiceWorker verwandte Linien und auch die import './index.css'; Linie.
Ersetzen Sie auch Ihre App.js Datei mit dem folgenden Code.
importieren Sie React, Component aus 'reagieren'; Die Klasse App erweitert die Komponente render () return (); Standard-App exportieren;
Nun werden wir die benötigten Module installieren.
Geben Sie in Ihr Terminal die folgenden Befehle ein, um das zu installieren reaktionsrouter und Reaktionsübergangsgruppe bzw. Module.
npm install reakt-router-dom --save
npm install [email protected] --save
Nach der Installation der Pakete können Sie das überprüfen package.json Datei in Ihrem Hauptprojektverzeichnis, um zu überprüfen, ob die Module unter enthalten sind Abhängigkeiten.
Grundsätzlich gibt es zwei verschiedene Router-Optionen: HashRouter und BrowserRouter.
Wie der Name andeutet, HashRouter verwendet Hashes, um Ihre Links zu verfolgen, und ist für statische Server geeignet. Wenn Sie jedoch über einen dynamischen Server verfügen, ist dies eine bessere Option BrowserRouter, in Anbetracht der Tatsache, dass Ihre URLs schöner werden.
Wenn Sie sich für eine entschieden haben, wählen Sie einfach die Komponente aus index.js Datei.
HashRouter aus 'Reakt-Router-Dom' importieren
Das nächste ist, unsere einzupacken
Also dein Finale index.js Datei sollte so aussehen:
import Reagieren von 'Reagieren'; importiere ReactDOM von 'reag-dom'; import HashRouter von 'Reakt-Router-Dom' App importieren von './App'; ReactDOM.render (, document.getElementById ('root'));
Wenn Sie einen dynamischen Server verwenden und diesen verwenden möchten BrowserRouter, Der einzige Unterschied wäre der Import der BrowserRouter und verwenden Sie es, um die
Durch die Verpackung unserer
In unserem und
Erstellen Sie einen Ordner mit dem Namen "Komponenten" in deiner src Verzeichnis und erstellen Sie das Menu.js und Content.js Dateien.
Füllen wir unser aus Menu.js Komponente.
Es wird eine zustandslose funktionale Komponente sein, da wir keine Zustände und Lebenszyklushaken benötigen.
Reagieren von 'Reagieren' const Menu = () => return (
Hier haben wir eine Tags, die unsere Links sein werden.
Fügen Sie nun die folgende Zeile zu Ihrem hinzu Speisekarte Komponente.
Link aus 'Reakt-Router-Dom' importieren
Und dann den Inhalt der einpacken Tags mit der Komponente.
Das Komponente ist im Wesentlichen ein reaktionsrouter Komponente, die wie ein Tag, aber es wird Ihre Seite nicht mit einem neuen Ziellink neu geladen.
Auch wenn Sie Ihren Stil gestalten ein Tag in CSS, werden Sie feststellen, dass die Komponente erhält das gleiche Styling.
Beachten Sie, dass es eine fortgeschrittenere Version von Komponente, die ist
Nun müssen wir definieren, wohin die einzelnen Links navigieren. Zu diesem Zweck wird die Komponente hat eine zu Stütze.
Reagieren von 'Reagieren' importieren Link von 'Reaktiver-Router-Dom' const Menü = () => Zurückkehren (
In unserem
Wir brauchen die Schalter und Route Komponenten aus Reagier-Router-Dom. Importieren Sie sie also zuerst.
Switch, Route aus 'Reakt-Router-Dom' importieren
Zweitens importieren Sie die Komponenten, zu denen wir routen möchten. Dies sind die Zuhause, Arbeitet und Über Komponenten für unser Beispiel. Angenommen, Sie haben diese Komponenten bereits im erstellt Komponenten Ordner müssen wir sie auch importieren.
Home von './Home' importieren
Works aus './Works' importieren
Info über './About' importieren
Diese Komponenten können alles sein. Ich habe sie nur als zustandslose Funktionskomponenten mit minimalem Inhalt definiert. Eine Beispielvorlage befindet sich unten. Sie können dies für alle drei Komponenten verwenden, aber vergessen Sie nicht, die Namen entsprechend zu ändern.
Reagieren von 'Reagieren' const Home = () => return (Zuhause) Standardeinstellung nach Hause exportieren
Wir nehmen das
Routen sind Komponenten, die Ihre Zielkomponente aufrufen, wenn sie mit der übereinstimmt Pfad Stütze.
Die endgültige Version unseres Content.js Datei sieht so aus:
import Reagieren aus 'reagieren' importieren Switch, Route aus 'reakt-router-dom' importieren Home von './Home' importieren Works aus './Works' importieren About aus './About' const Content = () = > zurück () Standardinhalt exportieren
Beachten Sie, dass das Extra genau Requisite wird für die benötigt Zuhause Komponente, die das Hauptverzeichnis ist. Verwenden genau zwingt die Route um den genauen Pfadnamen zu finden. Wenn es nicht verwendet wird, beginnen andere Pfadnamen mit / würde auch von der Zuhause Komponente, und für jeden Link würde nur die angezeigt Zuhause Komponente.
Wenn Sie nun auf die Menülinks klicken, sollte Ihre App den Inhalt wechseln.
Bisher haben wir ein funktionierendes Routersystem. Jetzt animieren wir die Routenübergänge. Um dies zu erreichen, verwenden wir die Reaktionsübergangsgruppe Modul.
Wir werden die animieren Montage Zustand jeder Komponente. Wenn Sie verschiedene Komponenten mit Route Komponente im Inneren Schalter, Du bist im Wesentlichen Montage und Demontieren verschiedene Komponenten entsprechend.
Wir werden verwenden Reaktionsübergangsgruppe In jeder Komponente wollen wir animieren. Sie können also für jede Komponente eine andere Montageanimation erstellen. Ich werde nur eine Animation für alle verwenden.
Als Beispiel verwenden wir die
Zuerst müssen wir importieren CSSTransitionGroup.
importieren CSSTransitionGroup aus 'reag-Übergangsgruppe'
Dann müssen Sie Ihre Inhalte damit einpacken.
Da es sich um den Montagezustand des Bauteils handelt, aktivieren wir ÜbergangAppear und legen Sie einen Timeout dafür fest. Wir deaktivieren auch Übergangseingang und Übergangslevel, da diese erst gültig sind, wenn die Komponente montiert ist. Wenn Sie untergeordnete Elemente der Komponente animieren möchten, müssen Sie diese verwenden.
Zuletzt fügen Sie das spezifische hinzu Übergangsname damit wir in der CSS-Datei darauf verweisen können.
import React aus 'reagieren' import CSSTransitionGroup aus 'reag-Übergangsgruppe' import 'importieren ... /styles/homeStyle.css' const Home = () => return () Standardeinstellung nach Hause exportieren Zuhause
Wir haben auch eine CSS-Datei importiert, in der wir die CSS-Übergänge definieren.
.homeTransition-erscheinen Deckkraft: 0; .homeTransition-seem.homeTransition-erscheinen-aktiv Deckkraft: 1; Übergang: alle .5s Leichtgängigkeit;
Wenn Sie die Seite aktualisieren, sollten Sie den Einblendeffekt von sehen Zuhause Komponente.
Wenn Sie dasselbe Verfahren auf alle anderen gerouteten Komponenten anwenden, werden die jeweiligen Animationen angezeigt, wenn Sie den Inhalt mit Ihren ändern Speisekarte.
In diesem Tutorial behandelten wir die Reagier-Router-Dom und Reaktionsübergangsgruppe Module. Beide Module enthalten jedoch mehr als wir in diesem Tutorial behandelt haben. Hier ist ein Arbeitsdemo von dem, was abgedeckt wurde.
Um weitere Funktionen zu erlernen, lesen Sie immer die Dokumentation der von Ihnen verwendeten Module.
In den letzten Jahren hat React an Popularität gewonnen. Tatsächlich gibt es auf dem Marktplatz eine Reihe von Artikeln, die zum Kauf, zur Überprüfung, zur Implementierung usw. zur Verfügung stehen. Wenn Sie nach weiteren Ressourcen rund um React suchen, zögern Sie nicht, sie herauszufinden.
Accentsconagua