Grundlegendes zu geschachtelten Routen in React

React ist eine von Facebook erstellte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Wenn Sie mit React noch nicht vertraut sind, würde ich empfehlen, eines unserer früheren Tutorials zu lesen, um mit React zu beginnen. In diesem Lernprogramm wird beschrieben, wie verschachteltes Routing in einer React-Webanwendung behandelt wird.

App einrichten

Wir beginnen mit dem Einrichten unserer React-Webanwendung. Erstellen wir einen Projektordner mit dem Namen ReactRouting. Innerhalb ReactRouting, Erstellen Sie eine Datei namens app.html. Unten ist der app.html Datei:

In der ReactRouting Ordner, initialisieren Sie das Projekt mit Node Package Manager (npm).

npm init

Geben Sie die projektspezifischen Details ein oder drücken Sie Eingeben für Standardeinstellungen, und Sie sollten die haben package.json Datei in der ReactRouting Mappe.

"name": "reactroutingapp", "version": "1.0.0", "description": "", "main": "app.js", "scripts": "test": "echo \" Fehler : Kein Test angegeben \ "&& exit 1", "author": "", "license": "ISC"

Installiere das reagieren und reagieren dom Abhängigkeiten mit npm.

Installieren Sie npm reave-dom --save

Installiere das Babel Paket mit npm und speichern Sie es im package.json Datei.

npm install --save-dev webpack-dev-server webpack babel-core babel-loader babel-Preset-React Babel-Preset-es2015

Babel Pakete werden benötigt, um den JSX-Code in JavaScript umzuwandeln. Erstellen Sie eine Webpack-Konfigurationsdatei, um die Webpack-Konfigurationen zu verarbeiten. Hier ist wie das webpack.config.js Datei würde aussehen:

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

app.js ist die Datei, in der sich unser React-Code befinden würde. Erstellen Sie eine Datei mit dem Namen app.js in der ReactRouting Mappe. Importieren Sie die erforderlichen Reaktibibliotheken in app.js. Erstellen Sie eine aufgerufene Komponente App ein div mit etwas text haben. Rendern Sie die Komponente mit der Render-Methode. Hier ist wie das Grundlegende app.js Datei würde aussehen:

importieren Reagieren von 'Reagieren' Importieren Rendern von 'Reaktomdom' const App = () => return ( 
'TutsPlus - Willkommen, um verschachtelte Routing-App zu reagieren'
 ); ; machen((  ), document.getElementById ('app'))

Starten Sie das neu Webpack Entwicklungsserver.

webpack-dev-server

Nach dem Neustart des Servers sollten Sie die React-App unter http: // localhost: 8080 / anzeigen können..

Umgang mit Routing in React

Wir werden davon Gebrauch machen reaktionsrouter Routing und verschachteltes Routing implementieren. Installieren Sie zuerst reaktionsrouter in unserem Projekt.

npm install reakt-router --save

Jetzt haben wir reaktionsrouter in unserem Projekt installiert. Lassen Sie uns ein paar Ansichten erstellen, um das Routing zu implementieren. In der app.js Datei, erstellen Sie zwei Komponenten namens view1 und view2. So würde der Code aussehen:

const View1 = () => return ( 
'Willkommen bei View1'
 ); ; const View2 = () => return ( 
'Willkommen bei View2'
 ); ;

Ein ... kreieren Speisekarte anzuzeigende Komponente View1 und View2 beim Klicken So sieht es aus:

const Menu = () => return ( 
 
 
'Zuhause'
 
 'View1' 
 
 'View2' 
 
 
 );

Verwenden Sie den Reaktiver Router, um die Standardroute für unsere Anwendung anzuzeigen. Mach das Speisekarte Komponente die Standardroute. Definieren Sie auch die Route für die View1 und View2 Komponenten. So sieht es aus: 

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

Speichern Sie die obigen Änderungen und starten Sie das neu Webpack Server. Das vertikale Navigationsmenü sollte unter http: // localhost: 8080 / webpack-dev-server / angezeigt werden..

Klicken Sie auf das Symbol View1 und View2 Links, und es sollte zu den entsprechenden Komponenten navigieren.

Verschachtelte Routen in Reaktion

Wir haben schon eine App Komponente, die den Kopfzeilentext anzeigt. Nehmen wir an, wir möchten, dass das Menü angeklickt wird, um die entsprechende Ansicht anzuzeigen, wir möchten jedoch, dass es in der gerendert wird App Komponente. 

Wir möchten, dass das Navigationsmenü auf allen Seiten verfügbar ist. Um dies zu erreichen, versuchen wir, unsere Reaktionskomponenten zu verschachteln View1 und View2 in der App  Komponente. Also wann immer die View1 gerendert wird, wird es im angezeigt App Komponente.

Ändern Sie nun die Routerkonfiguration und platzieren Sie die View1 und View2 route config in der App Komponentenroute.

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

Modifiziere den App Komponente zum Verschachteln der Speisekarte Komponente darin.

const App = () => return ( 
 
'TutsPlus - Willkommen, um verschachtelte Routing-App zu reagieren'
  
 ); ;

Um die verschachtelten Routen im darzustellen App Komponente, werden wir hinzufügen props.children zum App Komponente. Pass vorbei Requisiten als Funktionsargument an die App Komponente.

const App = (Requisiten) => return ( 
 
'TutsPlus - Willkommen, um verschachtelte Routing-App zu reagieren'
  props.children 
 ); ;

Fügen wir noch eins hinzu Zuhause Bestandteil unserer Anwendung.

const Home = () => return ( 
 
'Willkommen zuhause !!'
 
 ); ;

Umfassen die Zuhause Komponente in der verschachtelten Routenliste.

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

Speichern Sie die obigen Änderungen, und starten Sie den Server neu. In diesem Fall sollten Sie die Anwendung anzeigen können. Klicken Sie auf die Menüelemente, die aufgelistet werden, und jedes, wenn es angeklickt wird, sollte verschachtelt im dargestellt werden App Komponente.

Verpacken

In diesem Lernprogramm haben Sie gesehen, wie Sie verschachteltes Routing in einer React-Anwendung mit implementieren reaktionsrouter. Sie können kleine unabhängige Komponenten entwickeln und dann die Komponenten verwenden, um größere Anwendungen zu erstellen. Das Zusammenfügen kleiner Komponenten in große Anwendungen macht React wirklich mächtig. 

React wird zu einer der De-facto-Plattformen für die Arbeit im Web. Es ist nicht ohne Lernkurven und es gibt viele Ressourcen, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.

Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar. Teilen Sie uns Ihre Vorschläge und Gedanken in den Kommentaren unten mit.