So behandeln Sie das Routing in React

In einem meiner früheren Tutorials haben wir gesehen, wie Sie mit React und JSX loslegen können. In diesem Lernprogramm erfahren Sie, wie Sie mit der Einrichtung und Erstellung einer React-App beginnen. Wir werden uns darauf konzentrieren, wie Sie das Routing in einer React-App verwenden reaktionsrouter.

Fertig machen

Beginnen wir damit, unser Projekt mit Node Package Manager (npm) zu initiieren..

mkdir reactRoutingApp cd reactRoutingApp npm init

Installieren Sie die erforderlichen reagieren und reagieren dom Bibliotheken im Projekt.

Installieren Sie npm reave-dom --save

Wir werden verwenden Webpack Modulbündler für dieses Projekt. Installieren Webpack und Webpack-Entwicklungsserver.

npm install webpack webpack-dev-server --save-dev

Wir verwenden Babel, um die JSX-Syntax in JavaScript zu konvertieren. Installieren Sie das folgende Babel-Paket in unserem Projekt.

npm install --save-dev Babel-Core Babel-Loader Babel-Preset-React Babel-Preset-es2015

webpack-dev-server erfordert eine Konfigurationsdatei, in der wir die Eingabedatei, die Ausgabedatei und den Babel Loader definieren. Hier ist wie unser webpack.config.js Datei wird aussehen:

module.exports = entry: './app.js', Modul: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [] = es2015 & presets [] = reag'], ausgabe : Dateiname: 'bundle.js'; 

Als nächstes erstellen wir app.html wo die React App gerendert wird.

Lassen Sie uns die Einstiegspunktdatei erstellen app.js für unsere React-Anwendung.

import Reagieren von 'Reagieren'; import render von 'react-dom'; const App = () => return ( 
'TutsPlus - Willkommen bei React Routing Basic!'
 ); ; machen( , document.getElementById ('app')); 

Wie im obigen Code zu sehen, haben wir importiert reagieren und reagieren dom. Wir haben eine zustandslose Komponente erstellt App was einen Titel zurückgibt. Das machen Funktion rendert die Komponente innerhalb des App-Elements im app.html Seite.

Starten Sie den Webpack-Server. Die App sollte jetzt ausgeführt werden und die Nachricht von der Komponente anzeigen.

webpack-dev-server

Richten Sie Ihren Browser auf http: // localhost: 8080 / app.html und Sie sollten die App ausführen.

React Views erstellen

Jetzt sind wir mit unserer React-Anwendung fertig. Beginnen wir mit der Erstellung einiger Ansichten für unsere React-Routing-Anwendung. Um es einfach zu halten, erstellen wir alle Komponenten innerhalb derselben app.js Datei.

Erstellen wir eine Hauptkomponente mit dem Namen Navigation in dem app.js.

const Navigation = () => return ( 
  
 
'Zuhause'
 
'Kontakt'
 
'Über'
 
 
 ); ;

In obigem Navigation Komponente haben wir den App-Titel und ein neu erstelltes Menü für die Navigation zu den verschiedenen Bildschirmen der App. Die Komponente ist recht einfach mit einfachem HTML-Code. Machen wir weiter und erstellen Sie Bildschirme für Kontakt und Info. 

const About = () => return ( 
 
'Willkommen bei About!'
 
 ); ; const Contact = () => return ( 
 
'Willkommen bei Contact!'
 
 ); ;

Wir haben gerade eine Komponente zum Rendern des erstellt Über und Kontakt Bildschirme.

Ansichten verbinden mit Reakt-Router

Um verschiedene Ansichten miteinander zu verbinden, verwenden wir reaktionsrouter. Installiere das reaktionsrouter mit npm.

npm install reakt-router --save

Importieren Sie die benötigte Bibliothek von reaktionsrouter im app.js.

Link, Route, Router von 'Reakt-Router' importieren;

Anstatt festzulegen, welche Komponente gerendert werden soll, definieren wir unterschiedliche Routen für unsere Anwendung. Dafür machen wir Gebrauch reaktionsrouter. 

Definieren Sie die Routen für den Startbildschirm, den Kontaktbildschirm und den Info-Bildschirm.

machen(     , document.getElementById ('app'));

Wenn der Benutzer das besucht / Route, die Navigation Komponente wird beim Besuch gerendert /Über das Über Komponente wird gerendert und /Kontakt macht das Kontakt Komponente.

Modifiziere den Über und Kontakt Bildschirme, um einen Link zurück zum Startbildschirm aufzunehmen. Für das Verbinden von Bildschirmen verwenden wir Verknüpfung, Das funktioniert ähnlich wie das HTML-Anker-Tag.

const About = () => return ( 
 
'Willkommen bei About!'
 'Zurück nach Hause' 
 ); ; const Contact = () => return ( 
 
'Willkommen bei Contact!'
 'Zurück nach Hause' 
 ); ;

Modifiziere den Navigation Komponente, um die Verknüpfung zu den anderen Bildschirmen vom Startbildschirm aus aufzunehmen.

const Navigation = () => return ( 
  
 
'Zuhause'
 
 'Kontakt' 
 
 'Über' 
 
 
 ); ;

Speichern Sie die Änderungen und starten Sie das neu Webpack Server.

webpack-dev-server

Richten Sie Ihren Browser auf http: // localhost: 8080 / app.html, und Sie sollten die App mit grundlegendem Routing ausführen.

Verpacken

In diesem Tutorial haben wir gesehen, wie Sie mit dem Erstellen einer React-App beginnen und verschiedene Komponenten miteinander verbinden können reaktionsrouter. Wir haben gelernt, verschiedene Routen zu definieren und sie mit zu verknüpfen reaktionsrouter. 

Hast du es probiert? reaktionsrouter oder eine andere Routing-Bibliothek? Teilen Sie uns Ihre Meinung in den Kommentaren unten mit.

Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar.