React Router , este instrumentul dumneavoastră esențial pentru construirea de aplicații cu o singură pagină (SPA). Imaginați-vă utilizatorii care fac tranziția fără efort între secțiuni, experimentând site-ul dvs. ca o aplicație fluidă, iar React Router îl face posibil, deschizând calea pentru o experiență de utilizator încântătoare și o prezență web modernă. Un site web React nu ar trebui să însemne că o pagină mare se reîncarcă de fiecare dată când utilizatorii navighează.

Acest articol vă ajută să vă ghidați către lumea React Router și veți afla despre conceptul React Router și capacitățile acestuia. Rămâi la curent pentru a debloca potențialul unei navigări fluide și pentru a ridica proiectele React la nivelul următor!

Cuprins

forma completă ssh

• Ce este un router React?
• Pași pentru a utiliza React Router
• Componentele routerului React
• Implementarea React Router

Deoarece nu există o rutare încorporată în React, routerul React JS permite suportul de rutare în React și navigarea către diferite componente în aplicații cu mai multe pagini. Redă componente pentru rutele corespunzătoare și adresele URL alocate.

Ce este un router React?

React Router este o bibliotecă standard pentru rutare în Reacţiona . Permite navigarea între vizualizările diferitelor componente dintr-o aplicație React, permite modificarea adresei URL a browserului și menține interfața de utilizare sincronizată cu adresa URL. Să creăm o aplicație simplă pentru React pentru a înțelege cum funcționează routerul React. Aplicația va conține trei componente componentă acasă , cel Despre componentă , si componenta de contact . Vom folosi React Router pentru a naviga între aceste componente.

Pași pentru a utiliza React Router

Pasul 1: Inițializați un proiect react. Verificați această postare pentru configurarea aplicației React

Pasul 2: Instalați react-router în aplicația dvs., scrieți următoarea comandă în terminal

npm i react-router-dom>

Etapa 3: Importul React Router

metode matematice în java

import { BrowserRouter, Routes, Route } from 'react-router-dom';>

Structura folderului:

Dependențe actualizate în pachet.json fişier.

javafx pe eclipse

'dependencies': {  '@testing-library/jest-dom': '^5.17.0',  '@testing-library/react': '^13.4.0',  '@testing-library/user-event': '^13.5.0',  'react': '^18.2.0',  'react-dom': '^18.2.0',  'react-router-dom': '^6.22.1',  'react-scripts': '5.0.1',  'web-vitals': '^2.1.4' },>

Componentele routerului React

Principalele componente ale React Router sunt:

• BrowserRouter : BrowserRouter este o implementare a routerului care utilizează API-ul istoric HTML5 (pushState, replaceState și evenimentul popstate) pentru a vă menține interfața de utilizare sincronizată cu adresa URL. Este componenta părinte care este folosită pentru a stoca toate celelalte componente.
• Trasee : Este o componentă nouă introdusă în versiunea 6 și o actualizare a componentei. Principalele avantaje ale Routes over Switch sunt:
  • Relativ s și s
  • Rutele sunt alese pe baza celei mai bune potriviri în loc să fie parcurse în ordine.
• Traseu: Ruta este componenta afișată condiționat care redă o anumită interfață de utilizare atunci când calea acesteia se potrivește cu adresa URL curentă.
• Legătură: Componenta link este folosită pentru a crea link-uri către diferite rute și pentru a implementa navigarea în jurul aplicației. Funcționează ca o etichetă de ancorare HTML.

Implementarea React Router

Exemplu: Acest exemplu arată navigarea folosind react-router-dom către Componentele Acasă, Despre și Contact.

// Filename - App.js import React, { Component } from 'react'; import {  BrowserRouter as Router,  Routes,  Route,  Link, } from 'react-router-dom'; import Home from './component/home'; import About from './component/about'; import Contact from './component/contact'; import './App.css'; class App extends Component {  render() {  return (    
  
  
  Acasă  
  
  Despre noi  
  
  Contactaţi-ne  
  
    }>  }>  }>    
  );  } } exporta aplicația implicită;>>>JavascriptBun venit în lumea Geeks!; } export implicit Acasă;>>>Javascript  
techcodeview.com este un portal informatic pentru geek!
Citiți mai multe despre noi la: Ne puteți găsi aici: 
techcodeview.com 
Etajul 5 și 6, Royal Kapsons, A-118, 
Sector- 136, Noida, Uttar Pradesh (201305)); } export implicit Contact;>>> 
    Pasul pentru a rula aplicația:    Deschideți terminalul și introduceți următoarea comandă.
     Ieșire:    Deschideți browserul și proiectul nostru este afișat în URL      http://localhost:3000/      . Acum, puteți face clic pe linkuri și puteți naviga la diferite componente. React Router menține interfața de utilizare a aplicației dvs. sincronizată cu adresa URL.
 
 

  
În cele din urmă, am implementat cu succes navigarea în aplicația noastră React folosind React Router.