Vodič za početnike za reagiranje usmjerivača

Ili ono što bih volio da znam kad sam počeo s React Routerom.

Kliknite ovdje da biste otišli na Github repoOvaj vodič koristi React Router verzije 2.0.1 i Babel verziju 6.7.4

React Router je standardna knjižnica usmjeravanja za React. Iz dokumenata:

„React Router održava sinkronizaciju vašeg korisničkog sučelja s URL-om. Ima jednostavni API s moćnim značajkama kao što su lijeno učitavanje koda, dinamičko podudaranje rute i upravljanje prijelazom lokacije ugrađeni izravno. Neka URL bude vaša prva misao, a ne naknadna misao. "

Korak 1. Početak rada

Za početak možete klonirati početni repo i prijeći na drugi korak ili slijediti sljedeće korake i ručno postaviti svoj projekt.

Ručno postavljanje

Prvo, postavimo svoje okruženje s Reactom, Babelom i webpackom. Prvo stvorite mapu i cd u nju. Zatim pokrenite npm init -y:

npm init -y
  • -na samo odgovarate da na sva pitanja

Dalje, instalirajte reagirajte, reagirajte na usmjerivač i reagirajte na dom i spremite ih kao ovisnosti:

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

Zatim instalirajte naše razvojne ovisnosti. To će biti webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-es2015 i babel-preset-reagirati

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

Sada, kreirajmo konfiguracijske datoteke za webpack i babel:

touch .babelrc webpack.config.js

Dalje, kreirajmo mapu za naš kod. Nazvat ćemo ovu aplikaciju mape:

mkdir app

U direktoriju aplikacije stvorite tri datoteke: index.html app.js main.js

cd apptouch index.html app.js main.js

Naša struktura datoteka sada bi trebala izgledati ovako:

Sada otvorite datoteku .babelrc i dodajte unaprijed zadane postavke za reagiranje i ES2015:

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

U webpack.config.js dodajte sljedeću konfiguraciju za početak:

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' } ] }}
Ako želite saznati više o webpacku i babelu, pogledajte moj vodič o početku webpacka.

Sada kada su postavljeni webpack i babel. Stvorimo prečac za webpack-dev-server. Otvorite package.json i u ključ "skripte" umetnite sljedeću skriptu:

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

Sada možemo samo pokrenuti npm start da započnemo naš projekt.

Postavimo sada naš HTML i React. Otvorite index.html i stvorite osnovnu html stranicu. Zatim dodajte div s id-om korijena i oznaku skripte koja se odnosi na bundle.js:

    React Router 

Sada, idemo u naš main.js i postavimo ulaznu točku za našu aplikaciju. Upišite ovo u svoju datoteku main.js:

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

Ajmo sada u app.js i stvorimo našu komponentu aplikacije. Otvorite app.js i unesite sljedeće:

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

Hello World!

export default App

Još ne koristimo komponentu niti bilo koju komponentu usmjerivača / reaktora usmjerivača, ali uvodimo ih kako bismo mogli započeti s korakom dva.

Sada, ako pokrenete projekt i otvorite // localhost: 8100 / trebali biste dobiti 'Hello World !!!!!!' na vašem zaslonu:

npm start

Korak 2. Osnovno usmjeravanje

Postavimo osnovnu rutu. Komponentu aplikacije zamijenit ćemo razredom React, koja će vratiti komponentu usmjerivača. Usmjerivač će omotati sve rute koje ćemo definirati.

Svaka ruta bit će identificirana u komponenti. Komponenta će imati dva svojstva: put i komponentu. Kada se staza podudara s putanjom danom komponenti, vratit će navedenu komponentu.

U app.js refaktorirajte komponentu App tako da izgleda ovako:

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

Ako navigirate do // localhost: 8100 / trebali biste vidjeti našu komponentu Početna, a ako odete do // localhost: 8100 / # / adresa, trebali biste vidjeti našu adresu.

Primijetit ćete da postoje nasumični nizovi nakon hasha u vašoj adresnoj traci:

Kada upotrebljavate povijest raspršivanja, u nizu upita vidjet ćete dodatnu stavku koja izgleda otprilike kao _k = 123abc. Ovo je ključ koji povijest koristi za trajne podatke o stanju u window.sessionStorage između učitavanja stranica. Više pročitajte ovdje.

Ako želite čistiju adresu ili je koristite u proizvodnji, možda ćete htjeti potražiti preglednik povijesti i hashHistory. Kada koristite browserHistory, morate imati poslužitelj koji će vam uvijek vratiti poslužitelj na bilo kojoj ruti, na primjer, ako koristite nodejs, funkcionirala bi konfiguracija poput sljedeće (iz dokumenata):

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)

Da biste saznali više o povijesti povijesti, pogledajte ovu vezu.

Za ostatak ovog tutorijala koristit ćemo hashHistory.

Korak 3. 404 ruta

Što se događa ako krenemo rutom koja nije definirana? Postavimo 404 rutu i komponentu koja će se vratiti ako ruta nije pronađena:

const NotFound = () => ( 

404.. This page is not found!

)

Sada, ispod naše rute '/ adresa', kreirajte sljedeću rutu:

Sada, ako krenemo nekom rutom koja nije definirana (// localhost: 8100 / # / asdfasdf), trebali bismo vidjeti našu 404 rutu.

Korak 4. IndexRoute i Linkovi

Sad, dodajmo navigaciju da nas prebace između stranica.

Da bismo to učinili, koristit ćemo komponentu. je slično korištenju html sidrene oznake.

Iz dokumenata:

Primarni način da se korisnicima omogući navigacija oko vaše aplikacije. prikazat će potpuno dostupnu sidrenu oznaku s odgovarajućim hrefom.

Da bismo to učinili, napravimo prvo Nav komponentu. Naša Nav komponenta sadržavat će komponente i izgledat će ovako:

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

Sada ćemo pogledati kako oblikovati vezu na temelju toga je li ruta aktivna. Postoje dva glavna načina za to, ili dodavanjem stila izravno ili putem predavanja.

Iz dokumenata:

može znati kada je ruta do koje povezuje aktivna i automatski primijeniti ActiveClassName i / ili ActiveStyle kada je data bilo koja oslonac. Biti će aktivan ako je trenutna ruta ili povezana ruta ili bilo koji potomak slične rute. Da bi veza bila aktivna samo na točno povezanoj ruti, upotrijebite ili postavite oslonac samoA ctiveOnIndex.

Prvo, pogledajmo activeStyle. Da biste primijenili activeStyle, jednostavno dodajte activeStyle kao svojstvo na a i dodajte stiliranje koje želite da ima:

Home

Ažurirajmo našu Nav komponentu kako bismo to implementirali:

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

Sada, pogledajmo kako ovo izgleda u našem pregledniku. Možda ćete primijetiti da kada kliknete na adresu, taj je dom i dalje istaknut:

To je zato što će, kada se koristi zajedno s aktivnim stilom, biti aktivan ako je trenutna ruta ili in- ruta ili bilo koji potomak l- inked rute.

To znači da će adresa, budući da je potomak kuće, ostati istaknuta. Da bismo to popravili, svojstvo onlyActiveOnIndex možemo proslijediti našoj komponenti Link:

Home

Sada, kada pogledamo naš preglednik, veza će biti istaknuta samo ako se nalazimo na točnoj poveznici:

Tu je i bratska komponenta pozvanog. koji je aktivan samo kada je trenutna ruta točno povezana ruta.

Iz dokumenata:

An je poput a, samo što je aktivan samo kada je trenutna ruta točno povezana ruta. To je ekvivalentno sa setom rekvizita onlyActiveOnIndex.

Da biste to primijenili, prvo dovedite iz reakcijskog usmjerivača:

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

Sada jednostavno zamijenite komponente u nav s komponentama:

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

Sada, što kažete na dodavanje klasa u odnosu na stilove? Da bismo to učinili, možemo koristiti activeClassName. Postavimo aktivni stil u našem index.html:

 .active { color:#53acff }

Sada ćemo u našoj Nav komponenti zamijeniti activeStyle s activeClassName:

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

Za referencu, naš bi kod sada trebao izgledati ovako.

Korak 7. Imenovane komponente

Koristeći imenovane komponente, komponentu možemo odrediti kao rekvizite za.

Iz dokumenata:

Kada ruta ima jednu ili više imenovanih komponenata, podređeni elementi dostupni su po imenu na this.props. U ovom će slučaju this.props.children biti nedefinirani. Sve komponente rute mogu sudjelovati u gniježđenju.

Krenimo sada u kod i vidimo kako bi ovo zapravo izgledalo.

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.

To pokriva mnoge osnovne slučajeve korištenja za početak rada s React Routerom.

Zovem se Nader Dabit. Programer sam za školski status gdje pomažemo odgajateljima da donose pametne nastavne odluke pružajući sve svoje podatke na jednom mjestu. Pogledajte nas @ schoolstatusapp.Ako vam se sviđa React and React Native, pogledajte naš podcast - React Native Radio na Devchat.tvAko vam se svidio ovaj članak, preporučite ga i podijelite! Hvala na Vašem vremenu