de Jay Papisan

Imaginați-vă React Router ca operator al tabloului dvs.

Imaginati va React Router ca operator al tabloului dvs

La fel ca un tablou telefonic vechi, React Router este un operator neted, în culise, pentru aplicația dvs. React cu o singură pagină (SPA). Utilizatorii fac clic pe un link, URL-ul se modifică, vizualizările se schimbă și, din câte știu, au trecut la o altă pagină – cu excepția faptului că nu au făcut-o. Routerul React este un instrument cheie pentru a oferi spa-ului dvs. spațiu unei aplicații cu mai multe pagini, menținând în același timp redarea rapidă a DOM-ului virtual al React.

Să parcurgem componentele de bază ale utilizării React Router pentru a configura o navigare simplă. Pentru o aplicație web, veți rula yarn add react-router-dom. Există multe modalități de a răspândi componentele routerului, dar, pentru motive explicative, vom merge cu următoarele pentru a ilustra ierarhia componentelor necesare. Vom parcurge fiecare dintre componentele cu caractere aldine de mai jos – Furnizor, BrowserRouter, Switch și Traseu.

import React from 'react';import ReactDOM from 'react-dom';import { Provider } from 'react-redux';import { createStore, applyMiddleware } from 'redux';import { BrowserRouter, Route, Switch } from 'react-router-dom';import promise from 'redux-promise';import { PostsNew, PostsShow, PostsIndex } from './components'
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
ReactDOM.render( &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;  <BrowserRouter>   <div>    &lt;Switch>     <Route path="/posts/new" component={ PostsNew } />     <Route path="/posts/:id" component={ PostsShow } />     <Route path="/" component={ PostsIndex } />    </Switch>   </div>  </BrowserRouter> </Provider>, document.getElementById('root'));

Operator … aka

Deci, dacă apelul tău a fost anulat și trebuie să încerci din nou (reîncărcare pagină)? Vrei să te întorci și să-ți suni ultimul prieten (browser înapoi)? Nicio problemă, operatorul – aka Provider te-a acoperit. Folosește puterea lui Redux store pentru a păstra tot istoricul de navigare. Gândiți-vă la acesta ca la operatorul care scade ușor (și componentă părinte) din toate componentele dvs. React Router.

<Provider store={createStoreWithMiddleware(reducers)}>

Telefon sau telegraf? … aka

Nu puteți efectua un apel telefonic cu un telegraf. În mod similar, aveți nevoie de routerul corect pentru nativ vs web. Pentru majoritatea aplicațiilor web, importați BrowserRouter , care funcționează pe browserele HTML5, va face trucul.

Cine? .. … aka

Operatorul tău este leneș … își trec degetul în agenda telefonică și sună la prima persoană care se potrivește. Presupunând că doriți să redați doar o componentă pentru fiecare adresă URL, Switch permite redarea exclusivă (prin potrivirea regex din culise). Aveți grijă la modul în care le comandați – plasați cel mai specific primul și ultimul generic.

De exemplu, nu puneți path="/" mai întâi sau nu veți pleca niciodată de acasă …

&lt;Switch&gt;  <Route path="/posts/new" component={ PostsNew } /&gt;  <Route path="/posts/:id" component={ PostsShow } />  <Route path="/" component={ PostsIndex } /> </Switch>

Număr de telefon… .aka

Operatorii de tablouri au folosit numere de telefon? Oricare ar fi … Route componentă redă componenta specifică setată pentru a se potrivi cu o adresă URL. Observați mai jos :id —Utilizarea puterii lui React Router obiect de potrivire, orice după : este accesibil în cadrul componentei redate, de exemplu ca: this.props.match.params.id

&lt;Route path="/posts/:id" component={ PostsShow } />

Acest apel devine redundant, să chemăm rapid pe altcineva sau să ne întoarcem acasă. Cu React Router Link componentă (un wrapper elegant pentru o etichetă de ancorare HTML), puteți introduce un link la fel cum ați face un buton de pornire sau puteți ancora etichetele prin componentele dvs. Pur și simplu puneți destinația în to câmp și stil, așa cum ați face în linie sau adăugați un buton.

import { Link } from 'react-router-dom';
class YourThing extends Component {   render() {     return(       <div>        <Link to="/"> Home </Link>       </div>     )   }}

Asta este pentru câteva elemente de bază, deși există mult mai multe disponibile. Verificați excelentul documente și tutoriale pentru modalitățile infinite de a vă personaliza traseele. Vă mulțumesc că ați citit a doua postare Medium. Dă-mi câteva comentarii, corecturi sau aplauze dacă acest lucru a fost de ajutor.