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.

ssh in formato completo

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.

scorciatoie di Linux

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:

forzatura cache pulita npm

• 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:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Ci puoi trovare qui: 
techcodeview.com 
5° e 6° piano, Royal Kapsons, A-118, 
Settore - 136, Noida, Uttar Pradesh (201305)
); } esporta il contatto predefinito;>
  
    Passaggio per eseguire l'applicazione:    Apri il terminale e digita il seguente comando.
 
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.
Java diviso in stringhe
  
Infine, abbiamo implementato con successo la navigazione nella nostra applicazione React utilizzando React Router.