Înțelegerea rutei înstrăinate în React

React este o bibliotecă JavaScript construită de Facebook pentru construirea de interfețe utilizator. Dacă sunteți nou la React, aș recomanda citirea unuia dintre tutorialele noastre anterioare despre început cu React. În acest tutorial, vom discuta despre modul de gestionare a rutelor imbricate într-o aplicație web React.

Configurarea aplicației

Vom începe prin crearea aplicației noastre web React. Să creăm un director de proiect numit ReactRouting. Interior ReactRouting, creați un fișier numit app.html. Mai jos este app.html fişier:

  TutsPlus - Reacționează direcționarea nivelelor

În interiorul ReactRouting folder, inițializați proiectul folosind Node Package Manager (npm).

npm init

Introduceți detaliile specifice proiectului sau apăsați introduce pentru defaults, și ar trebui să aveți package.json fișier în interiorul ReactRouting pliant.

"name": "reactroutingapp", "versiunea": "1.0.0", "descriere": "", "principal": "app.js", "scripts": : nu este specificat nici un test \ "&& ieșire 1", "autor": "", "licență": "ISC"

Instalați reacţiona și reacționează-dom dependente folosind npm.

npm instalează reacția react-dom --save

Instalați hărmălaie pachetul folosind NPM și salvați-l la package.json fişier.

npm instalare -save-dev webpack-dev-server webpack babel-core babel-încărcător babel-preset-react babel-preset-es2015

hărmălaie pachetele sunt necesare pentru a transforma codul JSX în JavaScript. Creați un fișier de configurare webpack pentru a gestiona configurațiile webpack. Iată cum webpack.config.js fișier ar arata:

modul_exports = entry: './app.js', ieșire: nume fișier: 'bundle.js', modul: loaders: [exclude: / node_modules /, loader: ] = es2015 & presetări [] = reacție ']

app.js este dosarul în care va locui codul nostru React. Creați un fișier numit app.js în interiorul ReactRouting pliant. Importați bibliotecile de reacții necesare în app.js. Creați o componentă numită App având un div cu un text. Rendeaza componenta folosind metoda de randare. Iată cum este de bază app.js fișier ar arata:

import Reacționează de la 'react' import render de la 'react-dom' const App = () => return ( 'TutsPlus - Bine ați venit la aplicația React Nested Routing'
 ); ; face((  ), Document.getElementById ( 'app'))

Reporniți WebPACK server de dezvoltare.

WebPACK-dev-server

Odată ce serverul a fost repornit, ar trebui să puteți vizualiza aplicația React care rulează pe http: // localhost: 8080 /.

Manipularea rutei în reacție

Vom folosi reacționează-router pentru a implementa rutarea și rutarea imbricată. Mai întâi, instalați-o reacționează-router în proiectul nostru.

npm instalează router-ul de reacție - salvează

Acum avem reacționează-router instalat în proiectul nostru. Să creăm câteva opinii pentru a implementa rutarea. În interiorul app.js fișier, creați două componente numite view1 și view2. Iată cum ar arăta codul:

const View1 = () => return ( 'Bine ați venit la Vizualizare1'
 ); ; const View2 = () => retur ( 'Bun venit la View2'
 ); ;

Creeaza o Meniul componentă pentru afișare View1 și View2 dând clic. Iată cum arată:

const Menu = () => return (   'Acasă'
   'View1' 
   'View2' 
 
 
 );

Să folosim routerul pentru a afișa ruta implicită pentru aplicația noastră. Fă Meniul componentă a traseului implicit. De asemenea, definiți traseul pentru View1 și View2 componente. Iată cum arată:

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

Salvați modificările de mai sus și reporniți WebPACK Server. Ar trebui să aveți meniul vertical de navigare afișat la http: // localhost: 8080 / webpack-dev-server /.

Încercați să faceți clic pe View1 și View2 link-uri, și ar trebui să navigați la componentele corespunzătoare.

Rutele noutate în React

Avem deja unul App care afișează textul antetului. Să presupunem că vrem ca meniul să facă clic pentru a afișa vizualizarea corespunzătoare, dar vrem să fie redată în interiorul App component.

Vrem ca meniul de navigare să fie disponibil în toate paginile. Pentru a realiza acest lucru, vom încerca să cuibărească componentele noastre de reacție View1 și View2 în interiorul App componentă. Deci, ori de câte ori View1 este redat, este afișat în interiorul App component.

Acum modificați configurația routerului și plasați View1 și View2 configurarea rutei în interiorul App componentă.

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

Modificați App componentă pentru a cui Meniul componentă în interiorul acestuia.

const App = () => retur (  'TutsPlus - Bine ați venit la aplicația React Nested Routing'
  
 ); ;

Pentru a face rutele imbricate în interiorul App componenta, vom adăuga props.children la App componentă. Trece în recuzită ca argument pentru funcția App component.

const App = (recuzită) => return (  'TutsPlus - Bine ați venit la aplicația React Nested Routing'
  Props.children 
 ); ;

Să adăugăm, de asemenea, unul Acasă componente pentru aplicația noastră.

const Home = () => return (  'Bine ai venit acasa !!'
 
 ); ;

Includeți Acasă componentă în lista de rute imbricate.

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

Salvați modificările de mai sus și reporniți serverul și ar trebui să puteți vizualiza aplicația. Faceți clic pe elementele de meniu listate și fiecare când faceți clic trebuie să fie imbricate în interiorul App component.

Înfășurați-o

În acest tutorial, ați văzut cum să implementați rutarea imbricată într-o aplicație React utilizând reacționează-router. Puteți dezvolta componente independente mici și apoi utilizați componentele pentru a crea aplicații mai mari. A face posibilă coaserea componentelor mici în aplicații mari este ceea ce face ca React să fie foarte puternic.

React devine una dintre platformele de facto de lucru pe web. Nu este fără curbele sale de învățare și există o mulțime de resurse pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem la dispoziție pe piața Envato.

Codul sursă din acest tutorial este disponibil pe GitHub. Spuneți-ne sugestiile și gândurile noastre în comentariile de mai jos.

Cod