Slik håndterer du ruting i reaksjon

I en av mine tidligere opplæringsprogrammer så vi hvordan å komme i gang med React and JSX. I denne veiledningen ser vi hvordan du kommer i gang med å sette opp og opprette en React-app. Vi vil fokusere på hvordan du håndterer ruting i en React app ved hjelp av reagere-router.

Starter

La oss starte med å starte vårt prosjekt ved hjelp av Node Package Manager (npm).

mkdir reactRoutingApp cd reagererRoutingApp npm init

Installer den nødvendige reagere og reagere-dom biblioteker i prosjektet.

npm installere reagerer reagerer dom - save

Vi skal bruke Webpack modulpakker for dette prosjektet. Installere Webpack og webpack utvikling server.

npm installere webpack webpack-dev-server - save-dev

Vi bruker Babel til å konvertere JSX syntaks til JavaScript. Installer følgende babelpakke i prosjektet vårt.

npm installere - save-dev babel-core babel-loader babel-preset-reagerer babel-preset-es2015

Webpack-dev-serveren krever en config-fil der vi skal definere oppføringsfilen, utdatafilen og babellasteren. Her er hvordan vår webpack.config.js filen vil se ut:

module.exports = entry: '. /app.js', modul: loaders: [ekskluder: / node_modules /, loader: 'babel-loader? presets [] = es2015 og forhåndsinnstillinger [] = reagere : filnavn: 'bundle.js'; 

Neste skal vi opprette app.html hvor React-appen vil bli gjengitt.

La oss lage inngangspunktspilen app.js for vår React-applikasjon.

Import Reakt fra 'reagere'; importer render fra 'react-dom'; const App = () => retur ( 
'TutsPlus - Velkommen til React Routing Basic!'
 ); ; gjengi ( , document.getElementById ('app')); 

Som vist i koden ovenfor har vi importert reagere og reagere-dom. Vi opprettet en statsløs komponent som heter app som returnerer en tittel. De gjengi funksjonen gjør komponenten i app-elementet i app.html side.

La oss starte webpack-serveren, og appen skal kjøre og vise meldingen fra komponenten.

Webpack-dev-serveren

Pek nettleseren din til http: // localhost: 8080 / app.html og du bør ha appen kjører.

Opprette React Views

Nå er vi oppe med vår React-applikasjon. La oss begynne med å lage et par visninger for vårt React routing-program. Bare for å holde det enkelt, lager vi alle komponentene inne i det samme app.js fil.

La oss lage en hovedkomponent som heter navigasjon i app.js.

const navigasjon = () => retur ( 
  
 
'Hjem'
 
'Ta kontakt med'
 
'Handle om'
 
 
 ); ;

I det ovennevnte Navigasjon komponent, vi har app tittelen og en nyopprettet meny for navigering til forskjellige skjermer av appen. Komponenten er ganske enkel, med grunnleggende HTML-kode. La oss gå videre og skape skjermbilder for Kontakt og Om. 

const Om = () => retur ( 
 
'Velkommen til Om!'
 
 ); ; const kontakt = () => retur ( 
 
'Velkommen til kontakt!'
 
 ); ;

Vi har nettopp opprettet en komponent for å gjengi Handle om og Ta kontakt med skjermer.

Koble til visninger ved hjelp av reaksjonsruter

For å koble til forskjellige visninger vil vi gjøre bruk av reagere-router. Installer reagere-router bruker npm.

npm installere reaktor-router - lagre

Import det nødvendige biblioteket fra reagere-router i app.js.

importer Link, Route, Router fra 'reager-router';

I stedet for å spesifisere hvilken komponent som skal gjengis, definerer vi forskjellige ruter for applikasjonen vår. For det vil vi gjøre bruk av reagere-router. 

La oss definere ruter for startskjermen, kontaktskjermen og om skjermen.

gjengi (     , document.getElementById ('app'));

Når brukeren besøker / rute, den Navigasjon komponent blir gjengitt, på besøk /handle om de Handle om komponent blir gjengitt, og /ta kontakt med gjør det Ta kontakt med komponent.

Endre Handle om og Ta kontakt med skjermbilder for å inkludere en lenke tilbake til startskjermbildet. For å koble sammen skjermer, bruker vi link, som fungerer på samme måte som HTML-ankerkoden.

const Om = () => retur ( 
 
'Velkommen til Om!'
 'Tilbake til startsiden' 
 ); ; const kontakt = () => retur ( 
 
'Velkommen til kontakt!'
 'Tilbake til startsiden' 
 ); ;

Endre Navigasjon komponent for å inkludere lenken til de andre skjermbildene fra startskjermbildet.

const navigasjon = () => retur ( 
  
 
'Hjem'
 
 'Ta kontakt med' 
 
 'Handle om' 
 
 
 ); ;

Lagre endringene og start på nytt Webpack serveren.

Webpack-dev-serveren

Pek nettleseren din til http: // localhost: 8080 / app.html, og du bør ha appen kjører med grunnleggende ruting implementert.

Pakke det opp

I denne veiledningen så vi hvordan du kommer i gang med å lage en React-app og koble sammen ulike komponenter sammen med reagere-router. Vi lærte å definere forskjellige ruter og knytte dem sammen ved hjelp av reagere-router. 

Har du prøvd å bruke reagere-router eller andre rutebibliotek? Gi oss beskjed om dine tanker i kommentarene nedenfor.

Kildekode fra denne opplæringen er tilgjengelig på GitHub.