Οδηγός για αρχάριους για να αντιδράσετε το δρομολογητή

Ή ό, τι εύχομαι να ήξερα όταν ξεκίνησα με το React Router.

Κάντε κλικ εδώ για να μεταβείτε στο repo Github Αυτό το σεμινάριο χρησιμοποιεί το React Router έκδοση 2.0.1 και το Babel έκδοση 6.7.4

Το React Router είναι η τυπική βιβλιοθήκη δρομολόγησης για το React. Από τα έγγραφα:

«Το React Router διατηρεί το περιβάλλον χρήστη σας συγχρονισμένο με τη διεύθυνση URL. Διαθέτει ένα απλό API με ισχυρές δυνατότητες όπως τεμπέλης φόρτωσης κώδικα, δυναμική αντιστοίχιση διαδρομής και ενσωματωμένο χειρισμό μετάβασης τοποθεσίας. Κάντε τη διεύθυνση URL την πρώτη σας σκέψη, όχι μια μεταγενέστερη σκέψη. "

Βήμα 1. Ξεκινώντας

Για να ξεκινήσετε, μπορείτε είτε να κλωνοποιήσετε το αρχικό ρεπό και να μεταβείτε στο δεύτερο βήμα ή να ακολουθήσετε τα επόμενα βήματα και να ρυθμίσετε το έργο σας χειροκίνητα.

Μη αυτόματη ρύθμιση

Αρχικά, ας ρυθμίσουμε το περιβάλλον μας με το React, το Babel και το webpack. Αρχικά δημιουργήστε ένα φάκελο και cd σε αυτόν. Στη συνέχεια, εκτελέστε npm init -y:

npm init -y
  • Απλώς απαντά ναι σε όλες τις ερωτήσεις

Στη συνέχεια, εγκαταστήστε react, react-router και react-dom και αποθηκεύστε τα ως εξαρτήσεις:

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

Στη συνέχεια, εγκαταστήστε τις εξαρτήσεις dev. Αυτά θα είναι webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-es2015, και babel-preset-react

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

Τώρα, ας δημιουργήσουμε τα αρχεία διαμόρφωσης για webpack και babel:

touch .babelrc webpack.config.js

Στη συνέχεια, ας δημιουργήσουμε έναν φάκελο για τον κωδικό μας. Θα ονομάσουμε αυτήν την εφαρμογή φακέλου:

mkdir app

Στον κατάλογο εφαρμογών δημιουργήστε τρία αρχεία: index.html app.js main.js

cd apptouch index.html app.js main.js

Η δομή αρχείων μας πρέπει τώρα να έχει την εξής μορφή:

Τώρα, ανοίξτε το αρχείο .babelrc και προσθέστε τις προεπιλογές για αντίδραση και ES2015:

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

Στο webpack.config.js, προσθέστε την ακόλουθη διαμόρφωση για να ξεκινήσετε:

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' } ] }}
Εάν θέλετε να μάθετε περισσότερα για το webpack και το babel, ρίξτε μια ματιά στο σεμινάριό μου για την έναρξη του webpack.

Τώρα που έχει δημιουργηθεί το webpack και το babel. Ας δημιουργήσουμε μια συντόμευση για webpack-dev-server. Ανοίξτε το package.json και εισαγάγετε το ακόλουθο σενάριο στο κλειδί "scripts":

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

Τώρα, μπορούμε να τρέξουμε το npm για να ξεκινήσουμε το έργο μας.

Ας δημιουργήσουμε τώρα το HTML και το React. Ανοίξτε το index.html και δημιουργήστε μια βασική σελίδα html. Στη συνέχεια, προσθέστε ένα div με το αναγνωριστικό του root και μια ετικέτα σεναρίου που αναφέρεται στο bundle.js:

    React Router 

Τώρα, ας πάμε στο main.js και να δημιουργήσουμε ένα σημείο εισόδου για την εφαρμογή μας. Πληκτρολογήστε το στο αρχείο main.js:

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

Τώρα, ας πάμε στο app.js και δημιουργήστε το στοιχείο της εφαρμογής μας. Ανοίξτε το app.js και πληκτρολογήστε τα εξής:

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

Hello World!

export default App

Δεν χρησιμοποιούμε ακόμα το Component ή κανένα από τα στοιχεία του δρομολογητή / αντιδραστήρα, αλλά τα φέρνουμε ώστε να μπορέσουμε να ξεκινήσουμε στο δεύτερο βήμα.

Τώρα, εάν εκτελέσετε το έργο και μεταβείτε στο // localhost: 8100 / θα πρέπει να λάβετε το "Hello World !!!!!!" στην οθόνη σας:

npm start

Βήμα 2. Βασική δρομολόγηση

Ας δημιουργήσουμε μια βασική διαδρομή. Θα αντικαταστήσουμε το στοιχείο εφαρμογής με μια κλάση React, η οποία θα επιστρέψει ένα στοιχείο δρομολογητή. Ο δρομολογητής θα ολοκληρώσει όλες τις διαδρομές που πρόκειται να καθορίσουμε.

Κάθε διαδρομή θα προσδιορίζεται σε ένα στοιχείο. Το στοιχείο θα έχει δύο ιδιότητες: διαδρομή και στοιχείο. Όταν μια διαδρομή ταιριάζει με τη διαδρομή που δίνεται στο στοιχείο, θα επιστρέψει το καθορισμένο στοιχείο.

Στο app.js, αναδιαμορφώστε το στοιχείο εφαρμογής έτσι ώστε να μοιάζει με αυτό:

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

Τώρα, εάν πλοηγηθείτε στο // localhost: 8100 / θα πρέπει να δείτε το στοιχείο Αρχική σελίδα μας και εάν πλοηγηθείτε στο // localhost: 8100 / # / διεύθυνση θα πρέπει να δείτε το στοιχείο Διεύθυνση.

Θα παρατηρήσετε ότι υπάρχουν τυχαίες συμβολοσειρές μετά το κατακερματισμό στη γραμμή διευθύνσεών σας:

Όταν χρησιμοποιείτε ιστορικό κατακερματισμού, θα δείτε ένα επιπλέον στοιχείο στη συμβολοσειρά ερωτημάτων που μοιάζει με _k = 123abc. Αυτό είναι ένα κλειδί που χρησιμοποιεί το ιστορικό για να αναζητήσει δεδομένα μόνιμης κατάστασης στο window.sessionStorage μεταξύ των φορτώσεων σελίδας. Διαβάστε περισσότερα εδώ.

Εάν θέλετε μια καθαρότερη διεύθυνση ή χρησιμοποιείτε αυτήν την παραγωγή, ίσως θελήσετε να εξετάσετε το BrowserHistory vs hashHistory. Όταν χρησιμοποιείτε το πρόγραμμα περιήγησης Ιστορικό πρέπει να έχετε έναν διακομιστή που θα επιστρέφει πάντα τον διακομιστή σας σε οποιαδήποτε διαδρομή, για παράδειγμα εάν χρησιμοποιείτε nodejs, θα λειτουργήσει μια διαμόρφωση όπως η ακόλουθη (από τα έγγραφα):

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)

Για να μάθετε περισσότερα σχετικά με το Ιστορικό του προγράμματος περιήγησης, δείτε αυτόν τον σύνδεσμο.

Για το υπόλοιπο αυτού του σεμιναρίου, θα χρησιμοποιούμε hashHistory.

Βήμα 3. 404 διαδρομή

Τώρα, τι θα συμβεί αν φτάσουμε σε μια διαδρομή που δεν έχει καθοριστεί; Ας δημιουργήσουμε μια διαδρομή 404 και ένα στοιχείο που θα επιστρέψει εάν η διαδρομή δεν βρεθεί:

const NotFound = () => ( 

404.. This page is not found!

)

Τώρα, κάτω από τη διαδρομή '/ διεύθυνση', δημιουργήστε την ακόλουθη διαδρομή:

Τώρα, εάν πλοηγηθούμε σε κάποια διαδρομή που δεν έχει καθοριστεί (// localhost: 8100 / # / asdfasdf), θα πρέπει να δούμε τη διαδρομή 404.

Βήμα 4. IndexRoute και Links

Τώρα, ας προσθέσουμε την πλοήγηση για να μας βρείτε μεταξύ των σελίδων.

Για να γίνει αυτό, θα χρησιμοποιήσουμε το στοιχείο. είναι παρόμοιο με τη χρήση μιας ετικέτας αγκύρωσης html.

Από τα έγγραφα:

Ο κύριος τρόπος για να επιτρέψετε στους χρήστες να περιηγούνται στην εφαρμογή σας. θα αποδώσει μια πλήρως προσβάσιμη ετικέτα αγκύρωσης με το κατάλληλο href.

Για να γίνει αυτό, ας δημιουργήσουμε πρώτα ένα στοιχείο Nav. Το στοιχείο Nav μας θα περιέχει στοιχεία και θα έχει την εξής μορφή:

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.

Step 6. activeStyle / activeClassName and IndexLink

Τώρα θα δούμε πώς να σχεδιάζουμε έναν σύνδεσμο με βάση το εάν η διαδρομή είναι ενεργή. Υπάρχουν δύο βασικοί τρόποι για να το κάνετε αυτό, είτε προσθέτοντας στυλ απευθείας είτε μέσω μιας τάξης.

Από τα έγγραφα:

μπορεί να γνωρίζει πότε είναι ενεργή η διαδρομή με την οποία συνδέεται και να εφαρμόζει αυτόματα ένα ενεργόClassName ή / και το ενεργόStyle όταν δίνεται είτε ένα στήριγμα. Το θα είναι ενεργό εάν η τρέχουσα διαδρομή είναι είτε η συνδεδεμένη διαδρομή είτε οποιοσδήποτε απόγονος της καθορισμένης διαδρομής. Για να είναι ενεργός ο σύνδεσμος μόνο στην ακριβή συνδεδεμένη διαδρομή, χρησιμοποιήστε αντ 'αυτού ή ορίστε το μονόπλευρο ctiveOnIndex prop.

Αρχικά, ας δούμε το ActiveStyle. Για να εφαρμόσετε το ActiveStyle, απλώς προσθέτετε το activeStyle ως ιδιότητα σε ένα και περάστε το στυλ που θέλετε να έχετε:

Home

Ας ενημερώσουμε το στοιχείο Nav για να το εφαρμόσουμε:

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

Τώρα, ας ρίξουμε μια ματιά στο πώς φαίνεται αυτό στο πρόγραμμα περιήγησής μας. Μπορεί να παρατηρήσετε ότι όταν κάνετε κλικ στη διεύθυνση, η αρχική σελίδα επισημαίνεται:

Αυτό συμβαίνει επειδή όταν χρησιμοποιείται μαζί με το ActiveStyle, το will θα είναι ενεργό εάν η τρέχουσα διαδρομή είναι είτε η διαδρομή με μελάνη είτε κάποιος απόγονος της διαδρομής με μελάνη.

Αυτό σημαίνει ότι επειδή η διεύθυνση είναι απόγονος του σπιτιού, παραμένει επισημασμένη. Για να το διορθώσουμε, μπορούμε να μεταβιβάσουμε την ιδιότητα onlyActiveOnIndex στο στοιχείο Link:

Home

Τώρα, όταν κοιτάζουμε το πρόγραμμα περιήγησής μας, ο σύνδεσμος θα επισημανθεί μόνο εάν είμαστε στον ακριβή σύνδεσμο:

Υπάρχει επίσης ένα αδελφικό συστατικό του λεγόμενου. που είναι ενεργό μόνο όταν η τρέχουσα διαδρομή είναι ακριβώς η συνδεδεμένη διαδρομή.

Από τα έγγραφα:

Ένα είναι σαν, εκτός από το ότι είναι ενεργό μόνο όταν η τρέχουσα διαδρομή είναι ακριβώς η συνδεδεμένη διαδρομή. Είναι ισοδύναμο με το μοναδικό σετ propActiveOnIndex.

Για να το εφαρμόσετε, εισάγετε πρώτα από τον αντιδραστήρα αντίδρασης:

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

Τώρα, απλώς αντικαταστήστε τα στοιχεία στο nav με στοιχεία:

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

Τώρα, τι γίνεται με την προσθήκη τάξεων έναντι στυλ; Για να το κάνουμε αυτό, μπορούμε να χρησιμοποιήσουμε το ενεργόClassName. Ας δημιουργήσουμε ένα ενεργό στυλ στο index.html μας:

 .active { color:#53acff }

Τώρα, θα αντικαταστήσουμε το activeStyle με το ενεργόClassName στο στοιχείο Nav:

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

Για αναφορά, ο κώδικάς μας πρέπει τώρα να μοιάζει με αυτόν.

Βήμα 7. Ονομαζόμενα συστατικά

Χρησιμοποιώντας τα ονομαζόμενα συστατικά, μπορούμε να καθορίσουμε το στοιχείο ως στηρίγματα σε ένα.

Από τα έγγραφα:

Όταν μια διαδρομή έχει ένα ή περισσότερα ονόματα, τα θυγατρικά στοιχεία είναι διαθέσιμα ονομαστικά σε αυτό. Σε αυτήν την περίπτωση, αυτό θα είναι απροσδιόριστο. Όλα τα εξαρτήματα της διαδρομής μπορούν να συμμετέχουν στην ένθεση.

Ας σκάψουμε τώρα στον κώδικα και να δούμε πώς θα φαίνεται.

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.

Αυτό καλύπτει πολλές βασικές περιπτώσεις χρήσης για να ξεκινήσετε με το React Router.

Το όνομά μου είναι Nader Dabit. Είμαι προγραμματιστής στο School Status όπου βοηθάμε τους εκπαιδευτικούς να λαμβάνουν έξυπνες εκπαιδευτικές αποφάσεις παρέχοντας όλα τα δεδομένα τους σε ένα μέρος. Ρίξτε μια ματιά στο @ schoolstatusapp. Εάν σας αρέσει το React and React Native, δείτε το podcast μας - React Native Radio στο Devchat.tv Εάν σας άρεσε αυτό το άρθρο, προτείνετε και μοιραστείτε το! Ευχαριστώ για τον χρόνο σου