de Nader Dabit

Ghid pentru începători pentru a reacționa la router

Sau ce mi-aș dori să știu când încep cu React Router.

Clic aici pentru a merge la repo Github

Acest tutorial utilizează React Router versiunea 2.0.1 și Babel versiunea 6.7.4

React Router este biblioteca standard de rutare pentru React. Din documente:

„React Router vă menține interfața sincronizată cu adresa URL. Are un API simplu, cu funcții puternice, cum ar fi încărcarea codului leneș, potrivirea dinamică a rutei și gestionarea tranziției de locație încorporate chiar în interior. Faceți din URL primul dvs. gând, nu un gând ulterior.

Pasul 1. Introducere

Pentru a începe, puteți fie clonați repo starter și treceți la pasul doi sau urmați pașii următori și configurați-vă manual proiectul.

Configurare manuală

În primul rând, să configurăm mediul nostru cu React, Babel și webpack. Mai întâi creați un folder și cd-l în el. Apoi rulați npm init -y:

npm init -y
  • – doar răspund da la toate întrebările

Apoi, instalați react, react-router și react-dom și salvați-le ca dependențe:

npm i react react-dom react-router@2.0.1 --save

Apoi, instalați dependențele noastre de dev. Acestea vor fi webpack, webpack-dev-server, babel-core, babel-loader, babel-preset-es2015 și babel-preset-react

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

Acum, să creăm fișierele de configurare pentru webpack și babel:

touch .babelrc webpack.config.js

Apoi, să creăm un folder pentru codul nostru. Vom numi această aplicație folder:

mkdir app

În directorul de aplicații creați trei fișiere: index.html app.js main.js

cd apptouch index.html app.js main.js

Structura noastră de fișiere ar trebui să arate acum:

Ghid pentru incepatori pentru a reactiona la router

Acum, deschideți fișierul .babelrc și adăugați presetările pentru react și ES2015:

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

În webpack.config.js, adăugați următoarea configurație pentru a începe:

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'      }    ]  }}

Dacă doriți să aflați mai multe despre webpack și babel, consultați tutorialul meu despre începutul webpack.

Acum că webpack și babel sunt configurate. Să creăm o comandă rapidă pentru webpack-dev-server. Deschideți package.json și introduceți următorul script în cheia „scripturi”:

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

Acum, putem rula doar npm start pentru a începe proiectul nostru.

Să configurăm acum HTML-ul nostru și React. Deschideți index.html și creați o pagină html de bază. Apoi, adăugați un div cu id-ul root și o etichetă de script care face referire la bundle.js:

<!DOCTYPE html>  <html lang="en">  <head>    <meta charset="UTF-8">    <title>React Router</title>  </head>  <body>    <div id="root"></div>    <script src="https://www.freecodecamp.org/news/beginner-s-guide-to-react-router-53094349669/./bundle.js"></script>  </body></html>

Acum, să intrăm în main.js și să configurăm un punct de intrare pentru aplicația noastră. Tastați acest lucru în fișierul dvs. main.js:

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

Acum, hai să intrăm în app.js și să creăm componenta noastră pentru aplicație. Deschideți app.js și tastați următoarele:

import React, { Component } from 'react'import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
const App = () => <h1>Hello World!</h1>
export default App

Nu folosim încă Component sau oricare dintre componentele Router / react-router, dar le aducem astfel încât să putem începe la pasul doi.

Acum, dacă rulați proiectul și navigați la http: // localhost: 8100 / ar trebui să primești „Hello World !!!!!!” pe ecran:

npm start
1611591130 559 Ghid pentru incepatori pentru a reactiona la router
Salut Lume

Pasul 2. Rutare de bază

Să stabilim un traseu de bază. Vom înlocui componenta aplicației cu o clasă React, care va returna o componentă Router. Routerul va înfășura toate rutele pe care le vom defini.

Fiecare rută va fi identificată într-o componentă . Componenta va avea două proprietăți: cale și componentă. Când o cale se potrivește cu calea dată componentei , va returna componenta specificată.

În app.js, refactorizați componenta aplicației pentru a arăta astfel:

import React, { Component } from 'react'import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'
class App extends Component {  render() {    return (      <Router history={hashHistory}>        <Route path="/" component={Home} />        <Route path="/address" component={Address} />      </Router>    )  }}
const Home = () => <h1>Hello from Home!</h1>const Address = () => <h1>We are located at 555 Jackson St.</h1>
export default App

Acum, dacă navigați la http: // localhost: 8100 / ar trebui să vedeți componenta noastră Acasă și, dacă navigați la http: // localhost: 8100 / # / adresa ar trebui să vedeți componenta noastră Adresă.

Veți observa că există șiruri aleatorii după hash în bara de adrese:

Când utilizați istoricul hash, veți vedea un element suplimentar în șirul de interogare care arată ca _k = 123abc. Aceasta este o cheie pe care istoricul o folosește pentru a căuta date de stare persistente în window.sessionStorage între încărcările paginii. Citiți mai multe aici.

Dacă doriți o adresă mai curată sau utilizați aceasta în producție, vă recomandăm să căutați browserHistory vs hashHistory. Când utilizați browserHistory trebuie să aveți un server care vă va întoarce întotdeauna serverul pe orice rută, de exemplu, dacă utilizați nodejs, ar funcționa o configurație precum următoarea (din documente):

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)

Pentru a afla mai multe despre browserHistory, verificați acest link.

Pentru restul acestui tutorial, vom folosi hashHistory.

Pasul 3. 404 traseu

Acum, ce se întâmplă dacă lovim un traseu care nu este definit? Să configurăm o rută 404 și o componentă care va reveni dacă ruta nu este găsită:

const NotFound = () => (  <h1>404.. This page is not found!</h1>)

Acum, de mai jos ruta noastră „/ adresa”, creați următoarea rută:

<Route path="*" component={NotFound} />

Acum, dacă navighăm la un traseu care nu a fost definit (http: // localhost: 8100 / # / asdfasdf), ar trebui să vedem traseul nostru 404.

Acum, să adăugăm navigare pentru a ne duce între pagini.

Pentru a face acest lucru, vom folosi componenta . este similar cu utilizarea unei etichete de ancorare html.

Din documente:

Modul principal de a permite utilizatorilor să navigheze în jurul aplicației dvs. va reda o etichetă de ancorare complet accesibilă cu href adecvat.

Pentru a face acest lucru, să creăm mai întâi o componentă Nav. Componenta noastră Nav va conține componente și va arăta astfel:

const Nav = () => (  <div>    <Link to='/'>Home</Link>     <Link to='/address'>Address</Link>  </div>)

Acum avem nevoie de o modalitate de a face ca componenta Nav să fie persistentă pe toate paginile. Pentru a face acest lucru, vom înfășura traseele noastre copil într-o componentă principală . De asemenea, va trebui să ne actualizăm componenta Acasă și să creăm o nouă componentă numită Container:

Container:

const Container = (props) => <div>  <Nav />  {props.children}</div>

{props.children} va permite ca orice rută înfășurată în această rută să fie redată în această componentă.

Acum, să rescriem componenta aplicației noastre pentru a arăta astfel. Ne înfășurăm rutele HomePage, Address și NotFound în noua rută Container. De asemenea, setăm HomePage pentru a fi IndexRoute. Asta înseamnă că atunci când lovim http: // localhost: 8100, se va reda componenta noastră principală, deoarece este specificată ca index:

class App extends Component {  render () {    return (      <Router history={hashHistory}>        <Route path="/" component={Container}>          <IndexRoute component={Home} />          <Route path="/address" component={Address} />          <Route path="*" component={NotFound} />        </Route>      </Router>    )  }}

Pentru referință, codul nostru complet app.js ar trebui să arate ca. acest.

Acum, când navigăm spre http: // localhost: 8100, ar trebui să vedem componenta de pornire redată, împreună cu componentele noastre Nav !

Pasul 5. Copii multiple / IndexRoutes

Acum, să presupunem că vrem să cuibărim un feed Twitter și un feed Instagram în componenta noastră de adresă. Să creăm această funcționalitate.

Mai întâi, să rescriem ruta noastră de adrese pentru a lua două componente noi: InstagramFeed și TwitterFeed:

class App extends Component {  render () {    return (      <Router history={hashHistory}>        <Route path="/" component={Container}>          <IndexRoute component={Home} />          <Route path="address" component={Address}>            <IndexRoute component={TwitterFeed} />            <Route path="instagram" component={Instagram} />          </Route>          <Route path="*" component={NotFound} />        </Route>      </Router>    )  }}

Am setat adresa IndexRoute pentru a fi TwitterFeed și am adăugat și ruta Instagram acolo.

Acum, să creăm componentele noastre InstagramFeed și TwitterFeed. Acestea vor fi foarte simple, așa că știm că am parcurs rutele corecte:

const Instagram = () => <h3>Instagram Feed</h3>const TwitterFeed = () => <h3>Twitter Feed</h3>

În cele din urmă, accesați componenta Adresă și adăugați linkurile la noile componente, precum și la props.children, astfel încât componentele să fie redate:

const Address = (props) => <div>  <br />  <Link to='/address'>Twitter Feed</Link>   <Link to='/address/instagram'>Instagram Feed</Link>  <h1>We are located at 555 Jackson St.</h1>  {props.children}</div>

Acum, când navigăm spre http: // localhost: 8100 / # / adresa, ar trebui redată componenta de adresă, precum și componenta TwitterFeed:

1611591131 587 Ghid pentru incepatori pentru a reactiona la router

Pentru referință, codul până acum ar trebui să arate ca. acest.

Vom analiza acum cum să stilăm un link pe baza faptului că ruta este activă. Există două modalități principale de a face acest lucru, fie adăugând stil direct sau printr-o clasă.

Din documente:

poate ști când ruta este conectată este activă și poate aplica automat un ActiveClassName și / sau activeStyle când i se oferă fie prop. va fi activ dacă ruta curentă este fie ruta legată, fie orice descendent al litraseu nked. Pentru ca legătura să fie activă numai pe legătura exactă traseu, utilizare în schimb sau setați doarActiveOnIndex prop.

În primul rând, să ne uităm la activeStyle. Pentru a aplica activeStyle, pur și simplu adăugați activeStyle ca proprietate la un și treceți în stilul pe care doriți ca să îl aibă:

<Link activeStyle={{color:'#53acff'}} to=''>Home</Link>

Să ne actualizăm componenta Nav pentru a implementa acest lucru:

const Nav = () => (  <div>    <Link activeStyle={{color:'#53acff'}} to='/'>Home</Link>     <Link activeStyle={{color:'#53acff'}} to='/address'>Address</Link>     <Link activeStyle={{color:'#53acff'}} to='/about'>About</Link>  </div>)

Acum, să aruncăm o privire asupra aspectului în browserul nostru. Este posibil să observați că atunci când faceți clic pe adresă, acasă este încă evidențiată:

1611591131 520 Ghid pentru incepatori pentru a reactiona la router

Acest lucru se datorează faptului că atunci când utilizați împreună cu activeStyle, va fi activ dacă ruta curentă este fie ltraseul cu cerneală sau orice descendent al ltraseu cu cerneală.

Aceasta înseamnă că, deoarece Adresa este un descendent al paginii Acasă, rămâne evidențiată. Pentru a remedia acest lucru, putem transmite singura proprietateActiveOnIndex către componenta noastră Link:

<Link onlyActiveOnIndex activeStyle={{color:'#53acff'}} to='/'>Home</Link>

Acum, când ne uităm la browserul nostru, linkul va fi evidențiat numai dacă suntem pe linkul exact:

1611591131 305 Ghid pentru incepatori pentru a reactiona la router

Există, de asemenea, o componentă a fratelui numită . care este activ numai atunci când ruta curentă este exact ruta legată.

Din documente:

Un este la se vedea a , cu excepția faptului că este activ numai atunci când ruta curentă este exact ruta legată. Este echivalent cu cu singurul set de propuneri ActiveOnIndex.

Pentru a implementa acest lucru, aduceți mai întâi de la react-router:

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

Acum, pur și simplu înlocuiți componentele din nav cu componente :

const Nav = () => (  <div>    <IndexLink activeStyle={{color:'#53acff'}} to='/'>Home</IndexLink>     <IndexLink activeStyle={{color:'#53acff'}} to='/address'>Address</IndexLink>     <IndexLink activeStyle={{color:'#53acff'}} to='/about'>About</IndexLink>  </div>)

Acum, ce zici de adăugarea de clase versus stiluri? Pentru a face acest lucru, putem folosi activeClassName. Să configurăm un stil activ în index.html:

<style>  .active {   color:#53acff  }</style>

Acum, vom înlocui activeStyle cu activeClassName în componenta noastră Nav:

const Nav = () => (  <div>    <IndexLink activeClassName="active" to='/'>Home</IndexLink>     <IndexLink activeClassName="active" to='/address'>Address</IndexLink>     <IndexLink activeClassName="active" to='/about'>About</IndexLink>  </div>)

Pentru referință, codul nostru ar trebui să arate acum acest.

Pasul 7. Componente denumite

Folosind Componente denumite, putem specifica componenta ca elemente de recuzită pentru o .

Din documente:

Când o rută are una sau mai multe componente denumite, elementele copil sunt disponibile pe nume pe this.props. În acest caz this.props.children va fi nedefinit. Toate componentele traseului pot participa la cuibărit.

Haideți să cercetăm acum codul și să vedem cum ar arăta acest lucru.

În primul rând, să creăm o componentă nouă care va reda componentele noastre numite. Aceste componente vor fi disponibile ca accesorii:

const NamedComponents = (props) => (  <div>    {props.title}<br />    {props.subTitle}  </div>)

În continuare, să creăm două componente noi numite Title și Subtitle:

const Title = () => (  <h1>Hello from Title Component</h1>)const SubTitle = () => (  <h1>Hello from SubTitle Component</h1>)

Acum, să creăm un nou traseu pentru componenta noastră NamedComponents și să definim componentele Title și Subtitle din IndexRoute:

<Route path="/namedComponent" component={NamedComponents}>  <IndexRoute components={{ title: Title, subTitle: SubTitle }} /></Route>

În cele din urmă, să adăugăm un link către navigarea noastră pentru a naviga la această componentă:

<IndexLink activeClassName="active" to='/namedComponent'>Named Components</IndexLink>

Acum, ar trebui să vedem noul nostru link Componente numite atunci când ne uităm la browserul nostru și, când facem clic pe link, ar trebui să vedem redarea componentelor Title și SubTitle pe ecran:

1611591132 478 Ghid pentru incepatori pentru a reactiona la router

Pentru referință, codul nostru ar trebui să arate acum acest.

Pasul 8. Parametrii rutei

O parte esențială a multor aplicații este capacitatea de a citi parametrii rutei dintr-o adresă URL.

Pentru a implementa acest lucru, să revedem componenta noastră Despre. Mai întâi, să rescriem calea din routerul nostru pentru a lua un parametru opțional, îl vom numi nume:

<Route path="/about/:name" component={About} />

Acum, să rescriem componenta About pentru a utiliza această variabilă de nume:

const About = (props) => (  <div>    <h3>Welcome to the About Page</h3>    <h2>{props.params.name}</h2>  </div>)

Acum, dacă vizităm http: // localhost: 8100 / # / despre / nader vom vedea numele meu afișat mai jos „Bun venit la pagina Despre”.

Singura problemă aici este că dacă revizuim http: // localhost: 8100 / # / despre, obținem un 404 deoarece nu există parametru de nume. Pentru a remedia acest lucru, putem face parametrul opțional prin împachetarea acestuia între paranteze:

<Route path="/about(/:name)" component={About} />

Acum, dacă vizităm http: // localhost: 8100 / # / despre nu mai primim un 404 și putem accesa în continuare variabila de nume.

De asemenea, putem face acest pas mai departe verificând dacă props.name este disponibil și afișând un anumit conținut:

{ props.params.name && <h2>Hello, {props.params.name}</h2>}

Acum, conținutul va fi afișat numai dacă există un parametru de nume disponibil.

Pentru referință, codul nostru ar trebui să arate acum acest.

Pasul 9. Parametrii șirului de interogare

De asemenea, puteți trece în șiruri de interogare ca elemente de recuzită la orice componentă care va fi redată la un anumit traseu și puteți accesa acești parametri ca props.location.query.

Pentru a vedea cum funcționează, să creăm o nouă componentă numită Query și să redăm o proprietate numită props.location.query.message:

const Query = (props) => (  <h2>{props.location.query.message}</h2>)

Acum, haideți să configurăm noul nostru traseu de interogări în cadrul traseului de adrese pe care l-am creat deja:

...<Route path="/address" component={Address}>  <IndexRoute component={TwitterFeed} />  <Route path="instagram" component={Instagram} />  <Route path="query" component={Query} /></Route>...

În cele din urmă, să ne conectăm la acest traseu creând o nouă componentă Link și trecând într-un șir de interogare numit mesaj și oferindu-i o valoare. Acest lucru se face în proprietatea „către” pe care am folosit-o deja.

În loc să trecem un link către „către”, în loc să trecem într-un obiect proprietatea căii de acces și a interogării definite:

<IndexLink   activeClassName="active"   to={{     pathname: '/address/query',     query: { message: 'Hello from Route Query' }   }}>Route Query</IndexLink>

Acum, dacă facem clic pe linkul Interogare rutieră, ar trebui să vedem mesajul nostru afișat pe ecran:

1611591132 985 Ghid pentru incepatori pentru a reactiona la router

Pentru referință, codul nostru ar trebui să arate acum acest.

Aceasta acoperă multe cazuri de utilizare de bază pentru a începe cu React Router.

Numele meu este Nader Dabit . Sunt dezvoltator la Statutul școlii unde îi ajutăm pe educatori să ia decizii de instruire inteligente, oferind toate datele într-un singur loc. Verificați-ne @schoolstatusapp.

Dacă vă place React and React Native, verificați podcastul nostru – React Native Radio pe Devchat.tv

Dacă v-a plăcut acest articol, vă rugăm să îl recomandați și să îl împărtășiți! Mulțumesc pentru timpul acordat