Reagisci Router , è lo strumento essenziale per creare applicazioni a pagina singola (SPA). Immagina che gli utenti passino senza sforzo da una sezione all'altra, sperimentando il tuo sito web come un'app fluida e React Router lo rende possibile, aprendo la strada a un'esperienza utente piacevole e a una presenza web moderna. Un sito Web React non dovrebbe significare che una pagina di grandi dimensioni si ricarica ogni volta che gli utenti navigano.

Questo articolo ti aiuta a orientarti nel mondo di React Router e imparerai a conoscere il concetto di React Router e le sue capacità. Resta sintonizzato per sbloccare il potenziale di una navigazione fluida ed elevare i tuoi progetti React al livello successivo!

Tabella dei contenuti

• Cos'è un router React?
• Passaggi per utilizzare React Router
• Componenti del router React
• Implementazione del router React

Poiché in React non è presente alcun routing integrato, React JS Router consente il supporto del routing in React e la navigazione verso diversi componenti in applicazioni multipagina. Rende i componenti per i percorsi corrispondenti e gli URL assegnati.

Cos'è un router React?

Reagisci Router è una libreria standard per il routing Reagire . Abilita la navigazione tra le visualizzazioni di vari componenti in un'applicazione React, consente di modificare l'URL del browser e mantiene l'interfaccia utente sincronizzata con l'URL. Creiamo una semplice applicazione per React per capire come funziona il React Router. L'applicazione conterrà tre componenti: il componente domestico , IL Informazioni sul componente , e il componente di contatto . Utilizzeremo React Router per navigare tra questi componenti.

Passaggi per utilizzare React Router

Passo 1: Inizializza un progetto di reazione. Controlla questo post per configurazione dell'app React

Passo 2: Installa react-router nella tua applicazione e scrivi il seguente comando nel tuo terminale

npm i react-router-dom 

Fare un passo 3: Importazione del router React

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

Struttura delle cartelle:

Le dipendenze aggiornate in pacchetto.json file.

'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' }, 

Componenti del router React

I componenti principali di React Router sono:

• BrowserRouter : BrowserRouter è un'implementazione del router che utilizza l'API della cronologia HTML5 (pushState, replaceState e l'evento popstate) per mantenere l'interfaccia utente sincronizzata con l'URL. È il componente principale utilizzato per archiviare tutti gli altri componenti.
• Itinerari : È un nuovo componente introdotto nella v6 e un aggiornamento del componente. I principali vantaggi di Routes over Switch sono:
  • S e s relativi
  • I percorsi vengono scelti in base alla migliore corrispondenza invece di essere attraversati in ordine.
• Itinerario: Route è il componente mostrato in modo condizionale che esegue il rendering di parte dell'interfaccia utente quando il relativo percorso corrisponde all'URL corrente.
• Collegamento: Il componente collegamento viene utilizzato per creare collegamenti a percorsi diversi e implementare la navigazione nell'applicazione. Funziona come un tag di ancoraggio HTML.

Implementazione del router React

Esempio: Questo esempio mostra la navigazione utilizzando react-router-dom verso i componenti Home, Informazioni e Contatti.

// 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 (      
   
   
   Casa    
   
   Chi siamo    
   
   Contattaci    
   
      }>    }>    }>       
   );  } } esporta l'app predefinita; 

// Filename - component/home.js import React from 'react'; function Home() {  return  
Benvenuti nel mondo dei Geek! 
; } esporta la Home predefinita; 

// Filename - component/about.js import React from 'react'; function About() {  return (   
   
techcodeview.com è un portale informatico per geek! 
Leggi di più su di noi su: Ci puoi trovare qui: 
techcodeview.com 
5° e 6° piano, Royal Kapsons, A-118, 
Settore - 136, Noida, Uttar Pradesh (201305) ); } esporta il contatto predefinito; 

npm start 

Produzione: Apri il browser e il nostro progetto viene mostrato nell'URL http://localhost:3000/ . Ora puoi fare clic sui collegamenti e navigare tra i diversi componenti. React Router mantiene l'interfaccia utente dell'applicazione sincronizzata con l'URL.

Infine, abbiamo implementato con successo la navigazione nella nostra applicazione React utilizzando React Router.