Aloittelijan opas React Routeriin

Tai mitä haluaisin tietävän aloittaessani React Router.

Napsauta tätä siirtyäksesi Github-repoon Tämä opetusohjelma käyttää React Router -versiota 2.0.1 ja Babelin versiota 6.7.4

React Router on Reactin vakioreitityskirjasto. Asiakirjoista:

"React Router pitää käyttöliittymän synkronoituna URL-osoitteen kanssa. Sillä on yksinkertainen sovellusliittymä, jolla on tehokkaita ominaisuuksia, kuten laiska koodin lataus, dynaaminen reitin sovitus ja sijainninmuutosten käsittely. Sisältää URL-osoitteen ensimmäisenä ajatuksena, ei jälkikäteen. "

Vaihe 1. Aloittaminen

Aloittamiseksi voit joko kloonata käynnistysrepun ja siirtyä vaiheeseen 2 tai seurata seuraavia vaiheita ja määrittää projekti manuaalisesti.

Manuaalinen asennus

Ensinnäkin, asetetaan ympäristömme perustamaan React, Babel ja webpack. Luo ensin kansio ja cd siihen. Suorita sitten npm init -y:

npm init -y
  • -vastaan ​​kyllä ​​kaikkiin kysymyksiin

Asenna seuraavaksi reagoi, reagoi reititin ja reagoi-dom ja tallenna ne riippuvuuksiksi:

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

Asenna seuraavaksi dev-riippuvuutemme. Nämä ovat webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-es2015 ja babel-preset-react

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

Luodaan nyt webpackin ja babelin kokoonpanotiedostot:

touch .babelrc webpack.config.js

Seuraavaksi luodaan kansio koodillemme. Kutsumme tätä kansiosovellusta:

mkdir app

Luo sovellushakemistoon kolme tiedostoa: index.html app.js main.js

cd apptouch index.html app.js main.js

Tiedostorakenteen pitäisi nyt näyttää tältä:

Avaa nyt .babelrc-tiedosto ja lisää reagoinnin ja ES2015: n esiasetukset:

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

Lisää seuraava kokoonpano osoitteessa webpack.config.js aloittaaksesi:

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' } ] }}
Jos haluat oppia lisää webpackista ja babelista, tutustu oppaaseen webpackin alkamisesta.

Nyt se verkkopakkaus ja babel on perustettu. Luodaan pikakuvake webpack-dev-serverille. Avaa package.json ja lisää seuraava komentosarja komentosarjaavaimeen:

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

Nyt voimme vain suorittaa npm-aloituksen aloittaaksemme projektimme.

Määritetään nyt HTML ja React. Avaa index.html ja luo HTML-perussivu. Lisää sitten div, jolla on juuritunnus, ja komentotunniste, joka viittaa bundle.js: iin:

    React Router 

Mennään nyt main.js: ään ja perustetaan sovelluksellemme lähtökohta. Kirjoita tämä main.js-tiedostoon:

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

Mennään nyt app.js: ään ja luodaan sovelluskomponenttimme. Avaa app.js ja kirjoita seuraava:

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

Hello World!

export default App

Emme vielä käytä komponenttia tai mitään reitittimen / reagoivan reitittimen komponentteja, mutta tuomme ne sisään, jotta voimme aloittaa vaiheessa 2.

Jos suoritat projektin ja siirryt osoitteeseen // localhost: 8100 /, sinun pitäisi saada 'Hello World !!!!!!' ruudulla:

npm start

Vaihe 2. Perusreititys

Perustetaan perusreitti. Korvataan App-komponentti React-luokalla, joka palauttaa reitittimen komponentin. Reititin kääri kaikki määrittelemämme reitit.

Jokainen reitti tunnistetaan komponenttina. Komponentilla on kaksi ominaisuutta: polku ja komponentti. Kun polku vastaa komponentille annettua polkua, se palauttaa määritetyn komponentin.

Korjaa sovelluskomponentti app.js: ssä näyttämään tältä:

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

Jos nyt siirryt osoitteeseen // localhost: 8100 /, sinun pitäisi nähdä Koti-komponenttimme, ja jos navigoit osoitteeseen // localhost: 8100 / # / address, sinun pitäisi nähdä Osoite-komponentti.

Huomaat, että osoitepalkin hashin jälkeen on satunnaisia ​​merkkijonoja:

Kun käytät hajautushistoriaa, kyselymerkkijonossasi näkyy ylimääräinen kohde, joka näyttää olevan _k = 123abc. Tämä on avain, jota historia käyttää etsimään pysyviä tilatietoja window.sessionStorage -sivun latausten välillä. Lue lisää täältä.

Jos haluat puhtaamman osoitteen tai käytät tätä tuotannossa, sinun kannattaa tutkia browserHistory vs. hashHistory. Kun käytät browserHistory-palvelua, sinulla on oltava palvelin, joka palauttaa palvelimesi aina millä tahansa reitillä, esimerkiksi jos käytetään nodejs-tiedostoja, seuraavanlainen (docs-tiedostoista) kokoonpano toimisi:

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)

Saat lisätietoja selaimen historiasta tutustumalla tähän linkkiin.

Tämän opetusohjelman loppuosassa käytämme hashHistory-ohjelmaa.

Vaihe 3. 404-reitti

Mitä tapahtuu, jos lyömme reittiä, jota ei ole määritelty? Määritetään 404-reitti ja komponentti, joka palaa, jos reittiä ei löydy:

const NotFound = () => ( 

404.. This page is not found!

)

Nyt alle meidän "/ osoitteen reitin, luo seuraavaa reittiä:

Jos nyt navigoimme jollekin reitille, jota ei ole määritelty (// localhost: 8100 / # / asdfasdf), meidän pitäisi nähdä 404-reittimme.

Vaihe 4. Hakemistoreitti ja linkit

Lisää nyt navigointi saadaksesi meidät sivujen välillä.

Tätä varten käytämme komponenttia. on samanlainen kuin html-ankkuritunnisteen käyttö.

Asiakirjoista:

Ensisijainen tapa antaa käyttäjien liikkua sovelluksessasi. tekee täysin käytettävissä olevan ankkuritunnisteen oikealla hrefillä.

Tätä varten luodaan ensin Nav-komponentti. Nav-komponenttimme sisältää komponentteja ja näyttää tältä:

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

Tarkastellaan nyt, kuinka muotoilla linkki sen perusteella, onko reitti aktiivinen. Tähän on kaksi päämenetelmää, joko lisäämällä tyyli suoraan tai luokan kautta.

Asiakirjoista:

voi tietää, milloin reitti, johon se linkittää, on aktiivinen, ja ottaa automaattisesti käyttöön aktiivisen luokan nimen ja / tai aktiivisen tyylin, kun hänelle annetaan molemmat ehdotukset. Se on aktiivinen, jos nykyinen reitti on joko linkitetty reitti tai jokin sallitun reitin jälkeläinen . Jos haluat linkin olevan aktiivinen vain tarkalla linkitetyllä reitillä, käytä sen sijaan tai aseta theonlyA ctiveOnIndex -tuki.

Katsotaan ensin ensin activeStyle. Jos haluat käyttää activeStyleä, lisää yksinkertaisesti aktiivinen tyyli ominaisuudeksi a-kohtaan ja välitä haluamallasi tyylillä:

Home

Päivitetään Nav-komponenttimme tämän toteuttamiseksi:

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

Katsotaan nyt, miten tämä näyttää selaimessamme. Saatat huomata, että kun napsautat osoitetta, kyseinen koti näkyy edelleen korostettuna:

Tämä johtuu siitä, että kun käytät ActiveStyle-ohjelmaa, se on aktiivinen, jos nykyinen reitti on joko l- musteinen reitti tai jokin l- musteisen reitin jälkeläinen .

Tämä tarkoittaa, että koska Address on Kodin jälkeläinen, se pysyy korostettuna. Tämän korjaamiseksi voimme välittää onlyActiveOnIndex-ominaisuuden Link-komponentillemme:

Home

Kun katsomme selainta, linkki korostetaan vain, jos olemme tarkassa linkissä:

On myös sisar komponentti kutsutaan. se on aktiivinen vain, kun nykyinen reitti on täsmälleen linkitetty reitti.

Asiakirjoista:

An on kuin a, paitsi että se on aktiivinen vain, kun nykyinen reitti on täsmälleen linkitetty reitti. Se vastaa ainoaaActiveOnIndex-potkurisarjaa.

Toteuta tämä tuomalla ensin reaktioreititin:

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

Vaihda nyt navin komponentit vain komponentteihin:

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

Entä kuinka luokkien ja tyylien lisääminen? Tätä varten voimme käyttää activeClassName. Määritetään aktiivinen tyyli hakemistoomme index.html:

 .active { color:#53acff }

Korvataan nyt aktiivinen tyyli navigaattorikomponenttamme ActiveClassName:

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

Viitteeksi meidän koodin pitäisi nyt näyttää tältä.

Vaihe 7. Nimetyt komponentit

Nimettyjen komponenttien avulla voimme määrittää komponentin rekvisiittaa a: lle.

Asiakirjoista:

Kun reitillä on yksi tai useampia nimettyjä komponentteja, alielementit ovat saatavana nimellä this.props. Tässä tapauksessa tämä. Prop. Lapset ovat määrittelemättömiä. Kaikki reitin komponentit voivat osallistua pesimiseen.

Kaivetaan nyt koodiin ja katsotaan, miten tämä todella näyttää.

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.

Se kattaa monet perustiedot React Routerin käytön aloittamisesta.

Nimeni on Nader Dabit. Olen School Status -kehittäjä, jossa autamme opettajia tekemään älykkäitä opetuspäätöksiä toimittamalla kaikki tiedot yhteen paikkaan. Tarkista meidät osoitteesta @ schoolstatusapp. Jos pidät React and React Native -palvelusta, tutustu podcastimme - React Native Radio Devchat.tv-palveluun Jos pidit tästä artikkelista, suosittele ja jaa se! Kiitos ajastasi