Kezdő útmutató a React Routerhez

Vagy amit szeretnék, ha tudnék, amikor a React Routerrel kezdem.

Kattintson ide a Github repo megnyitásához. Ez az oktatóprogram a React Router 2.0.1 és a Babel 6.7.4 verzióit használja

A React Router a React szabványos útválasztási könyvtára. A dokumentumokból:

„A React Router szinkronban tartja a felhasználói felületét az URL-lel. Egyszerű API-val rendelkezik, olyan hatékony funkciókkal, mint a lusta kódbetöltés, a dinamikus útvonal-egyeztetés és a helyátmenet kezelése. Ez az URL legyen az első gondolatod, ne utólagos gondolat. "

1. lépés. Az első lépések

A kezdéshez vagy klónozza az indító repót, és ugorjon a második lépésre, vagy kövesse a következő lépéseket, és manuálisan állítsa be a projektet.

Kézi beállítás

Először állítsuk be környezetünket a React, a Babel és a webpack segítségével. Először hozzon létre egy mappát és CD-t. Ezután futtassa az npm init -y parancsot:

npm init -y
  • -csak minden kérdésre igennel válaszol

Ezután telepítse a reakciót, a reakció-útválasztót és a reak-dom-t, majd mentse el őket függőségként:

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

Ezután telepítse a dev függőségeinket. Ezek a következők lesznek: webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-es2015 és babel-preset-react

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

Most hozzuk létre a webpack és a babel konfigurációs fájljait:

touch .babelrc webpack.config.js

Ezután hozzunk létre egy mappát a kódunkhoz. Ezt a mappa alkalmazást fogjuk hívni:

mkdir app

Az alkalmazás könyvtárban hozzon létre három fájlt: index.html app.js main.js

cd apptouch index.html app.js main.js

A fájlszerkezetünknek így kell kinéznie:

Nyissa meg a .babelrc fájlt, és adja hozzá a reakció és az ES2015 presetjeit:

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

A webpack.config.js fájlban adja hozzá a következő konfigurációt a kezdéshez:

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' } ] }}
Ha szeretne többet megtudni a webpackról és a babelről, nézze meg az útmutatómat a webpack kezdetéről.

Most fel van állítva a webpack és a babel. Hozzunk létre egy parancsikont a webpack-dev-server számára. Nyissa meg a package.json fájlt, és illessze be a következő szkriptet a „scripts” kulcsba:

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

Most már csak futtathatjuk az npm startot a projekt elindításához.

Most állítsuk be a HTML-t és a React-et. Nyissa meg az index.html fájlt, és hozzon létre egy alap HTML oldalt. Ezután adjon hozzá egy div azonosítót a root azonosítóval, és egy szkriptcímkét, amely hivatkozik a bundle.js fájlra:

    React Router 

Most menjünk be a main.js fájlba, és állítsunk be egy belépési pontot az alkalmazásunkhoz. Írja be ezt a main.js fájlba:

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

Most menjünk be az app.js fájlba, és hozzuk létre az alkalmazás komponensünket. Nyissa meg az app.js fájlt, és írja be a következőt:

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

Hello World!

export default App

Még nem használjuk a Component vagy az útválasztó / reagál-útválasztó egyik alkatrészét, de behozzuk őket, hogy a második lépésben elkezdhessük.

Most, ha futtatja a projektet, és a // localhost: 8100 / webhelyre lép, meg kell kapnia a 'Hello World !!!!!!' a képernyőn:

npm start

2. lépés: Alapvető útválasztás

Állítsunk be egy alapútvonalat. Az App komponenst lecseréljük egy React osztályra, amely egy Router összetevőt ad vissza. Az útválasztó be fogja zárni az összes útvonalat, amelyet meghatározni fogunk.

Minden útvonalat egy komponensben azonosítanak. A komponens két tulajdonságot fog kapni: elérési út és komponens. Amikor egy elérési út megegyezik az összetevőnek megadott útvonallal, visszaadja a megadott összetevőt.

Az app.js fájlban alakítsa át az App komponenst, hogy így nézzen ki:

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

Most, ha a // localhost: 8100 / címre navigál, meg kell jelennie a Home komponensünknek, a // localhost: 8100 / # / address címre pedig a Address komponensünket kell látnia.

Észre fogja venni, hogy véletlenszerű karakterláncok vannak a címsávban található kivonat után:

A kivonatelőzmények használatakor a lekérdezési karaktersorozatban egy olyan extra elem jelenik meg, amely úgy néz ki, mint _k = 123abc. Ez egy kulcs, amelyet az előzmények a perzisztens állapotadatok megkeresésére használnak az window.sessionStorage oldalon az oldal betöltések között. Bővebben itt olvashat.

Ha tisztább címet szeretne, vagy ezt használja a termelésben, érdemes megnéznie a browserHistory vs hashHistory oldalt. A browserHistory használatakor rendelkeznie kell olyan szerverrel, amely mindig visszaadja a szervert bármely útvonalon, például ha nodejs-t használ, akkor a következő konfiguráció működne (a docs-ból):

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)

Ha többet szeretne megtudni a browserHistory-ról, nézze meg ezt a linket.

A bemutató további részében a hashHistory-t fogjuk használni.

3. lépés. 404 útvonal

Mi történik, ha olyan útvonalat találunk, amely nincs meghatározva? Állítsunk be egy 404-es útvonalat és alkatrészt, amely visszatér, ha az útvonal nem található:

const NotFound = () => ( 

404.. This page is not found!

)

Most, az alábbiakban a „/ cím” útvonalon hozza létre a következő útvonalon:

Most, ha olyan útvonalhoz navigálunk, amelyet még nem definiáltunk (// localhost: 8100 / # / asdfasdf), látnunk kell a 404-es útvonalunkat.

4. lépés: Indexútvonal és hivatkozások

Most adjunk hozzá navigációt, hogy az oldalak között mozoghassunk.

Ehhez a komponenst fogjuk használni. hasonló a html horgonycímke használatához.

A dokumentumokból:

Az elsődleges mód a felhasználók navigálására az alkalmazásban. teljesen hozzáférhető horgonycímkét jelenít meg a megfelelő href-el.

Ehhez először hozzunk létre egy Nav komponenst. A Nav komponensünk összetevőket tartalmaz, és így fog kinézni:

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

Most megvizsgáljuk, hogyan lehet egy Linket stílusozni annak alapján, hogy az útvonal aktív-e. Ennek két fő módja van: a stílus hozzáadása közvetlenül vagy egy osztályon keresztül.

A dokumentumokból:

tudhatja, hogy az általa összekapcsolt útvonal mikor aktív, és automatikusan alkalmazza az ActiveClassName és / vagy az activeStyle elemet, ha bármelyik támogatást megkapja. Az aktív akkor lesz aktív, ha az aktuális útvonal vagy a kapcsolt útvonal, vagy a felcsatolt út bármely leszármazottja . Ha a link csak a pontos összekapcsolt útvonalon szeretne aktív lenni, használja helyette, vagy állítsa be a theonlyA ctiveOnIndex prop elemet.

Először nézzük meg az activeStyle-t. Az activeStyle alkalmazásához egyszerűen hozzá kell adnia az activeStyle tulajdonságot a-hoz, és át kell adnia a kívánt stílusot:

Home

Frissítsük a Nav komponensünket ennek megvalósításához:

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

Most nézzük meg, hogyan néz ki ez a böngészőnkben. Észreveheti, hogy amikor a címre kattint, az adott Otthon továbbra is ki van emelve:

Ez azért van, mert az activeStyle együttes használatakor a program akkor lesz aktív, ha az aktuális útvonal vagy a tintás útvonal, vagy a tinta nélküli útvonal leszármazottja .

Ez azt jelenti, hogy mivel a cím az Otthon leszármazottja, kiemelve marad. Ennek kijavításához átadhatjuk a onlyActiveOnIndex tulajdonságot a Link komponensünknek:

Home

Most, amikor a böngészőnket nézzük, a link csak akkor lesz kiemelve, ha a pontos linken vagyunk:

Van egy testvére komponense is az ún. ez csak akkor aktív, ha az aktuális útvonal pontosan a kapcsolt útvonal.

A dokumentumokból:

Az An olyan, mint a, kivéve, hogy csak akkor aktív, ha az aktuális útvonal pontosan a kapcsolt útvonal. Ez megegyezik a onlyActiveOnIndex prop készletével.

Ennek megvalósításához először hozza be a reakció-útválasztót:

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

Most egyszerűen cserélje ki a nav komponenseit alkatrészekre:

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

És mit szólna hozzá az osztályok és a stílusok hozzáadásához? Ehhez használhatjuk az activeClassName fájlt. Állítsunk be egy aktív stílust az index.html fájlban:

 .active { color:#53acff }

Most az ActiveStyle-t lecseréljük az aktívClassName-re a Nav komponensünkben:

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

Referenciaként a kódunknak most így kell kinéznie.

7. lépés. Elnevezett alkatrészek

A Megnevezett komponensek használatával megadhatunk egy komponenst a.

A dokumentumokból:

Ha egy útvonalnak egy vagy több megnevezett összetevője van, akkor a gyermekelemek név szerint elérhetők a this.props oldalon. Ebben az esetben ez a.támasz.gyerekek nem lesznek meghatározva. Az útvonal minden összetevője részt vehet a fészkelésben.

Most mélyedjünk el a kódban, és nézzük meg, hogy nézne ki ez valójában.

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.

Ez számos alapvető használati esetre kiterjed a React Router használatának megkezdéséhez.

A nevem Nader Dabit. Fejlesztő vagyok az iskolai státuszban, ahol segítünk az oktatóknak okos oktatási döntéseket hozni azáltal, hogy minden adatot egy helyen adunk meg. Nézzen meg minket @ schoolstatusapp. Ha tetszik a React and React Native, nézze meg podcastunkat - React Native Radio a Devchat.tv oldalon. Ha tetszett ez a cikk, ajánlja és ossza meg! Köszönöm a rám szánt időt