Anfängerhandbuch zum Reagieren des Routers

Oder was ich wünschte, ich wüsste es, als ich mit React Router anfing.

Klicken Sie hier, um zum Github-Repo zu gelangen. Dieses Tutorial verwendet React Router Version 2.0.1 und Babel Version 6.7.4

React Router ist die Standard-Routing-Bibliothek für React. Aus den Dokumenten:

„React Router hält Ihre Benutzeroberfläche mit der URL synchron. Es verfügt über eine einfache API mit leistungsstarken Funktionen wie dem Laden von verzögertem Code, dem dynamischen Routenabgleich und der integrierten Handhabung von Standortübergängen. Machen Sie die URL zu Ihrem ersten Gedanken, nicht zu einem nachträglichen Gedanken. “

Schritt 1. Erste Schritte

Zu Beginn können Sie entweder das Starter-Repo klonen und mit Schritt 2 fortfahren oder die nächsten Schritte ausführen und Ihr Projekt manuell einrichten.

Manuelle Einrichtung

Lassen Sie uns zunächst unsere Umgebung mit React, Babel und Webpack einrichten. Erstellen Sie zuerst einen Ordner und legen Sie eine CD hinein. Führen Sie dann npm init -y aus:

npm init -y
  • -y beantwortet nur alle Fragen mit Ja

Installieren Sie als Nächstes React, React-Router und React-Dom und speichern Sie sie als Abhängigkeiten:

npm i react react-dom [email protected] --save

Installieren Sie als Nächstes unsere Entwicklungsabhängigkeiten. Dies sind Webpack, Webpack-Dev-Server, Babel-Core, Babel-Loader, Babel-Preset-ES2015 und Babel-Preset-React

npm i webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

Jetzt erstellen wir die Konfigurationsdateien für Webpack und Babel:

touch .babelrc webpack.config.js

Als nächstes erstellen wir einen Ordner für unseren Code. Wir nennen diese Ordner-App:

mkdir app

Erstellen Sie im App-Verzeichnis drei Dateien: index.html app.js main.js

cd apptouch index.html app.js main.js

Unsere Dateistruktur sollte nun so aussehen:

Öffnen Sie nun die .babelrc-Datei und fügen Sie die Voreinstellungen für react und ES2015 hinzu:

{ "presets": [ "es2015", "react" ]}

Fügen Sie in webpack.config.js die folgende Konfiguration hinzu, um loszulegen:

module.exports = { entry: './app/main.js', output: { path: './app', filename: 'bundle.js' }, devServer: { inline: true, contentBase: './app', port: 8100 }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' } ] }}
Wenn Sie mehr über Webpack und Babel erfahren möchten, lesen Sie mein Tutorial zum Beginn des Webpacks.

Jetzt sind Webpack und Babel eingerichtet. Erstellen wir eine Verknüpfung für den Webpack-Dev-Server. Öffnen Sie package.json und fügen Sie das folgende Skript in den Schlüssel "scripts" ein:

"scripts": { "start": "webpack-dev-server"}

Jetzt können wir einfach npm start ausführen, um unser Projekt zu starten.

Lassen Sie uns jetzt unser HTML und React einrichten. Öffnen Sie index.html und erstellen Sie eine Basis-HTML-Seite. Fügen Sie dann ein div mit der ID root und ein Skript-Tag hinzu, das auf bundle.js verweist:

    React Router 

Gehen wir jetzt in unsere main.js und richten einen Einstiegspunkt für unsere App ein. Geben Sie dies in Ihre Datei main.js ein:

import React from 'react'import ReactDOM from 'react-dom'import App from './app'ReactDOM.render(, document.getElementById('root'))

Gehen wir jetzt in app.js und erstellen unsere App-Komponente. Öffnen Sie app.js und geben Sie Folgendes ein:

import React, { Component } from 'react'import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
const App = () =>

Hello World!

export default App

Wir verwenden noch keine Komponente oder eine der Router / React-Router-Komponenten, bringen sie jedoch ein, damit wir mit Schritt zwei beginnen können.

Wenn Sie nun das Projekt ausführen und zu // localhost: 8100 / navigieren, sollten Sie 'Hello World !!!!!!' erhalten. auf Ihrem Bildschirm:

npm start

Schritt 2. Grundlegendes Routing

Lassen Sie uns eine grundlegende Route einrichten. Wir werden die App-Komponente durch eine React-Klasse ersetzen, die eine Router-Komponente zurückgibt. Der Router umschließt alle Routen, die wir definieren werden.

Jede Route wird in einer Komponente identifiziert. Die Komponente hat zwei Eigenschaften: Pfad und Komponente. Wenn ein Pfad mit dem der Komponente angegebenen Pfad übereinstimmt, wird die angegebene Komponente zurückgegeben.

Refaktorieren Sie in app.js die App-Komponente so, dass sie folgendermaßen aussieht:

import React, { Component } from 'react'import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
class App extends Component { render() { return (     ) }}
const Home = () =>

Hello from Home!

const Address = () =>

We are located at 555 Jackson St.

export default App

Wenn Sie nun zu // localhost: 8100 / navigieren, sollte unsere Home-Komponente angezeigt werden, und wenn Sie zu // localhost: 8100 / # / address navigieren, sollte unsere Address-Komponente angezeigt werden.

Sie werden feststellen, dass nach dem Hash in Ihrer Adressleiste zufällige Zeichenfolgen stehen:

Wenn Sie den Hash-Verlauf verwenden, wird in Ihrer Abfragezeichenfolge ein zusätzliches Element angezeigt, das ungefähr so ​​aussieht wie _k = 123abc. Dies ist ein Schlüssel, den der Verlauf verwendet, um persistente Statusdaten in window.sessionStorage zwischen Seitenladevorgängen nachzuschlagen. Lesen Sie hier mehr.

Wenn Sie eine sauberere Adresse wünschen oder diese in der Produktion verwenden, sollten Sie sich browserHistory vs hashHistory ansehen. Wenn Sie browserHistory verwenden, müssen Sie über einen Server verfügen, der Ihren Server immer auf jeder Route zurückgibt. Wenn Sie beispielsweise nodejs verwenden, funktioniert eine Konfiguration wie die folgende (aus den Dokumenten):

const express = require('express')const path = require('path')const port = process.env.PORT || 8080const app = express()// serve static assets normallyapp.use(express.static(__dirname + '/public'))// handle every other route with index.html, which will contain// a script tag to your application's JavaScript file(s).app.get('*', function (request, response){ response.sendFile(path.resolve(__dirname, 'public', 'index.html'))})app.listen(port)console.log("server started on port " + port)

Weitere Informationen zu browserHistory finden Sie unter diesem Link.

Für den Rest dieses Tutorials werden wir hashHistory verwenden.

Schritt 3. 404 Route

Was passiert nun, wenn wir eine Route treffen, die nicht definiert ist? Richten Sie eine 404-Route und -Komponente ein, die zurückgegeben wird, wenn die Route nicht gefunden wird:

const NotFound = () => ( 

404.. This page is not found!

)

Erstellen Sie nun unter unserer Route '/ address' die folgende Route:

Wenn wir nun zu einer Route navigieren, die nicht definiert wurde (// localhost: 8100 / # / asdfasdf), sollten wir unsere 404-Route sehen.

Schritt 4. IndexRoute und Links

Fügen wir nun die Navigation hinzu, um zwischen den Seiten zu gelangen.

Dazu verwenden wir die Komponente. ähnelt der Verwendung eines HTML-Ankertags.

Aus den Dokumenten:

Die primäre Möglichkeit, Benutzern das Navigieren in Ihrer Anwendung zu ermöglichen. rendert ein vollständig zugängliches Ankertag mit der richtigen href.

Dazu erstellen wir zunächst eine Nav-Komponente. Unsere Nav-Komponente enthält Komponenten und sieht folgendermaßen aus:

const Nav = () => ( Home  Address )

Now we need a way to make our Nav component persistent across all pages. To do this, we will wrap our child routes in a main component. We will also need to update our Home component, and create a new component called Container:

Container:

const Container = (props) => {props.children} 

{props.children} will allow any routes wrapped within this route to be rendered in this component.

Now, let’s rewrite our App component to look like this. We are wrapping our HomePage, Address and NotFound routes inside the new Container route. We are also setting HomePage to be our IndexRoute. That means that when we hit //localhost:8100, our Home component will render, as it is specified as the index:

class App extends Component { render () { return (        ) }}

For reference, our full app.js code should look like this.

Now, when we navigate to //localhost:8100, we should see our Home Component rendered, along with our Nav components!

Step 5. Multiple child / IndexRoutes

Now, let’s say we want to nest a twitter feed and an Instagram feed in our address component. Let’s create that functionality.

First, let’s rewrite our address route to take two new components: InstagramFeed and TwitterFeed:

class App extends Component { render () { return (           ) }}

We’ve set the IndexRoute of address to be TwitterFeed, and have added the Instagram route there as well.

Now, let’s create our InstagramFeed and TwitterFeed components. These will be very basic just so we know we’ve hit the correct routes:

const Instagram = () =>

Instagram Feed

const TwitterFeed = () =>

Twitter Feed

Finally, go into the Address component, and add the Links to the new components as well as props.children, so the components will be rendered:

const Address = (props) =>

Twitter Feed  Instagram Feed

We are located at 555 Jackson St.

{props.children}

Now, when we navigate to //localhost:8100/#/address, the address component should be rendered as well as the TwitterFeed component:

For reference, the code up to now should look like this.

Schritt 6. activeStyle / activeClassName und IndexLink

Wir werden uns nun ansehen, wie man einen Link basierend darauf formatiert, ob die Route aktiv ist. Es gibt zwei Möglichkeiten, dies zu tun: entweder direkt oder über eine Klasse Stil hinzufügen.

Aus den Dokumenten:

kann erkennen, wann die Route, mit der es verknüpft ist, aktiv ist, und automatisch einen activeClassName und / oder activeStyle anwenden, wenn eine der beiden Requisiten angegeben wird. Das ist aktiv, wenn die aktuelle Route entweder die verknüpfte Route oder ein Nachkomme der verknüpften Route ist. Damit der Link nur auf der genau verknüpften Route aktiv ist, verwenden Sie stattdessen oder setzen Sie die einzigeA ctiveOnIndex-Requisite.

Schauen wir uns zunächst activeStyle an. Um activeStyle anzuwenden, fügen Sie einfach activeStyle als Eigenschaft zu a hinzu und übergeben das gewünschte Styling:

Home

Lassen Sie uns unsere Nav-Komponente aktualisieren, um dies zu implementieren:

const Nav = () => ( Home  Address  About )

Now, let’s take a look at how this looks in our browser. You may notice that when you click on address, that Home is still highlighted:

This is because when using along with activeStyle, the will be active if the current route is either the linked route or any descendant of the linked route.

This means that because Address is a descendent of Home, it stays highlighted. To fix this, we can pass the onlyActiveOnIndex property to our Link component:

Home

Now, when we look at our browser, the link will only be highlighted if we are on the exact link:

There is also a sibling component of called . that is only active when the current route is exactly the linked route.

From the docs:

An ist wie a, außer dass es nur aktiv ist, wenn die aktuelle Route genau die verknüpfte Route ist. Dies entspricht dem Requisitensatz onlyActiveOnIndex.

Um dies zu implementieren, bringen Sie zuerst vom React-Router Folgendes ein:

import { ..., IndexLink } from 'react-router'

Ersetzen Sie jetzt einfach die Komponenten in nav durch Komponenten:

const Nav = () => ( Home  Address  About )

Wie wäre es nun mit dem Hinzufügen von Klassen und Stilen? Dazu können wir activeClassName verwenden. Lassen Sie uns einen aktiven Stil in unserer index.html einrichten:

 .active { color:#53acff }

Jetzt ersetzen wir activeStyle in unserer Nav-Komponente durch activeClassName:

const Nav = () => ( Home  Address  About )

Als Referenz sollte unser Code jetzt so aussehen.

Schritt 7. Benannte Komponenten

Mit Named Components können wir Komponenten als Requisiten für a angeben.

Aus den Dokumenten:

Wenn eine Route eine oder mehrere benannte Komponenten enthält, sind die untergeordneten Elemente auf this.props namentlich verfügbar. In diesem Fall ist this.props.children undefiniert. Alle Routenkomponenten können an der Verschachtelung teilnehmen.

Let’s now dig into the code and see how this would actually look.

First, let’s create a new Component that will be rendering our Named Components. These components will be available as props:

const NamedComponents = (props) => ( {props.title}

{props.subTitle} )

Next, let’s create two new components called Title and Subtitle:

const Title = () => ( 

Hello from Title Component

)const SubTitle = () => (

Hello from SubTitle Component

)

Now, let’s create a new route for our NamedComponents component, and define the Title and Subtitle components in the IndexRoute:

Finally, let’s add a link to our nav to navigate to this component:

Named Components

Now, we should see our new Named Components link when we look at our browser, and when clicking on the link we should see our Title and SubTitle components rendering on the screen:

For reference, our code should now look like this.

Step 8. Route Parameters

An essential part of many applications is the ability to read route parameters from a url.

To implement this, let’s revisit our About component. First, let’s rewrite the path in our Router to take an optional parameter, we’ll call it name:

Now, let’s rewrite our About component to use this name variable:

const About = (props) => ( 

Welcome to the About Page

{props.params.name}

)

Now, if we visit //localhost:8100/#/about/nader we will see my name displayed below “Welcome to the About Page”.

The only issue here is that if we revisit //localhost:8100/#/about, we get a 404 because there is no name parameter. To fix this, we can make the parameter optional by wrapping it in parenthesis:

Now, if we visit //localhost:8100/#/about we no longer get a 404, and can still access the name variable.

We can also take this one step further by checking to see if props.name is available and displaying some content:

{ props.params.name && 

Hello, {props.params.name}

}

Now, the content will only be shown if there is a name parameter available.

For reference, our code should now look like this.

Step 9. Query String Parameters

You can also pass in query strings as props to any component that will be rendered at a specific route, and access these parameters as props.location.query.

To see how this works, let’s create a new component called Query, and render a property called props.location.query.message:

const Query = (props) => ( 

{props.location.query.message}

)

Now, let’s set up our new Query Route within the address route we already have created:

...   ...

Finally, let’s link to this route by creating a new Link component, and passing in a query string called message and giving it a value. This is done in the ‘to’ property that we have already used.

Instead of passing a link to ‘to’, we instead pass in an object the the pathname and query properties defined:

Route Query

Now, if we click on our Route Query link, we should see our message rendered on the screen:

For reference, our code should now look like this.

Dies umfasst viele grundlegende Anwendungsfälle für den Einstieg in React Router.

Mein Name ist Nader Dabit. Ich bin Entwickler bei School Status, wo wir Pädagogen dabei helfen, kluge Unterrichtsentscheidungen zu treffen, indem wir alle ihre Daten an einem Ort bereitstellen. Check us out @ schoolstatusapp.Wenn dir React and React Native gefällt, schau dir unseren Podcast - React Native Radio auf Devchat.tv an. Wenn dir dieser Artikel gefallen hat, empfehle ihn bitte und teile ihn! Vielen Dank für Ihre Zeit