Reacții cu o singură pagină cu modulele React-Router și React-Transition-Group

Acest tutorial vă va ajuta să utilizați modulele reacter-router și react-module de tranziție pentru a crea aplicații React cu mai multe pagini cu animații de tranziție a paginilor.

Pregătirea aplicației React

Instalarea pachetului de aplicații create-react-app

Dacă ați avut ocazia să încercați React, probabil ați auzit despre Create-reacționează aplicație pachet, ceea ce face foarte ușor să începeți cu un mediu de dezvoltare React.

În acest tutorial, vom folosi acest pachet pentru a iniția aplicația noastră React.

Deci, în primul rând, asigurați-vă că aveți Node.js instalat pe computer. Acesta va instala, de asemenea, npm pentru tine.

În terminalul tău, fugi npm instalează -g create-react-app. Acest lucru va fi instalat global Create-reacționează aplicație pe calculatorul tau.

Odată ce ați terminat, puteți să verificați dacă există tastând create-react-app -V.

Crearea proiectului React

Acum este timpul să construim proiectul nostru React. Fugi crea-reac-app-app multi-page. Poți, bineînțeles, să le înlocui cu mai multe pagini aplicație cu tot ce vrei.

Acum, Create-reacționează aplicație va crea un folder numit cu mai multe pagini aplicație. Doar tastați cd multi-page-app pentru a schimba directorul și a alerga acum npm start pentru a inițializa un server local.

Asta e tot. Aveți o aplicație React care rulează pe serverul dvs. local.

Acum este timpul sa curatati fisierele implicite si sa pregatiti aplicatia.

În tine src folder, ștergeți totul, dar nu App.js și index.js. Atunci deschide-te index.js și înlocuiți conținutul cu codul de mai jos.

import Reacționează de la "reacționează"; import ReactDOM de la "react-dom"; aplicația de import de la "./App"; ReactDOM.render (, document.getElementById ( 'root')); 

Am eliminat practic registerServiceWorker precum și import "./index.css"; linia.

De asemenea, înlocuiți-vă App.js fișier cu codul de mai jos.

import React, Component de la "reacție"; clasa App extinde Component render () return ( 
 
 );  exportă aplicația implicită;

Acum vom instala modulele necesare.

În terminalul dvs., tastați următoarele comenzi pentru a instala reacționează-router și reacționează-tranziție-grup module, respectiv.

npm instala rea-router-dom -save

npm install [email protected] - salvați

După instalarea pachetelor, puteți verifica package.json fișier din directorul principal al proiectului pentru a verifica dacă modulele sunt incluse în dependențe.

Componente router

Există în principiu două opțiuni diferite de router: HashRouter și BrowserRouter.

După cum sugerează și numele, HashRouter utilizează hashes pentru a urmări legăturile dvs. și este potrivit pentru serverele statice. Pe de altă parte, dacă aveți un server dinamic, este o opțiune mai bună de a utiliza BrowserRouter, având în vedere faptul că adresele dvs. URL vor fi mai frumoase.

Odată ce vă decideți care dintre ele ar trebui să utilizați, continuați și adăugați componenta la dvs. index.js fişier.

import HashRouter de la "react-router-dom"

Următorul lucru este să ne împachetăm  componente cu componenta router.

Deci, ultimul tău index.js fișierul ar trebui să arate astfel:

import Reacționează de la "reacționează"; import ReactDOM de la "react-dom"; importați HashRouter din aplicația "import-router-dom" import din "./App"; ReactDOM.render (, document.getElementById ( 'root')); 

Dacă utilizați un server dinamic și preferați să îl utilizați BrowserRouter, singura diferență ar fi importul BrowserRouter și folosind-o pentru a înfășura  component.

Prin împachetarea noastră  componente, noi servim istorie obiecte față de aplicația noastră și, prin urmare, alte componente ale router-ului de reacție pot comunica între ele.

Interior component

În interiorul nostru  componente, vom avea două componente numite 

import Reacționează din 'react' const Menu = () => return ( 
 
Acasă
 
Lucrări
 
Despre
 
 ) Meniul implicit pentru export