React Router , és la vostra eina essencial per crear aplicacions d'una sola pàgina (SPA). Imagineu que els usuaris fan una transició entre seccions sense esforç, experimentant el vostre lloc web com una aplicació fluida i React Router ho fa possible, obrint el camí per a una experiència d'usuari deliciosa i una presència web moderna. Un lloc web de React no hauria de significar que una pàgina gran es recarrega cada vegada que els usuaris naveguen.

100 km/h en mph

Aquest article us ajuda a guiar-vos cap al món de React Router i aprendreu sobre el concepte React Router i les seves capacitats. Estigueu atents per desbloquejar el potencial d'una navegació fluida i elevar els vostres projectes React al següent nivell!

Taula de contingut

• Què és un encaminador React?
• Passos per utilitzar React Router
• Components del router React
• Implementació de React Router

Com que no hi ha cap enrutament integrat a React, el React JS Router permet el suport d'encaminament a React i la navegació a diferents components en aplicacions de diverses pàgines. Representa components per a les rutes corresponents i els URL assignats.

Què és un encaminador React?

React Router és una biblioteca estàndard per a l'encaminament Reacciona . Permet la navegació entre vistes de diversos components en una aplicació React, permet canviar l'URL del navegador i manté la interfície d'usuari sincronitzada amb l'URL. Creem una aplicació senzilla per a React per entendre com funciona el React Router. L'aplicació contindrà tres components component de la llar , el Sobre el component , i la component de contacte . Utilitzarem React Router per navegar entre aquests components.

Passos per utilitzar React Router

Pas 1: Iniciar un projecte reaccionar. Comproveu aquesta publicació configurar l'aplicació React

Pas 2: Instal·leu react-router a la vostra aplicació, escriviu la següent comanda al vostre terminal

npm i react-router-dom>

Pas 3: Importació de React Router

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

Estructura de carpetes:

quantes pel·lícules de missió impossible hi ha

Les dependències actualitzades a package.json dossier.

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

Components del router React

Els components principals de React Router són:

• BrowserRouter : BrowserRouter és una implementació d'encaminador que utilitza l'API de l'historial HTML5 (pushState, replaceState i l'esdeveniment popstate) per mantenir la vostra interfície d'usuari sincronitzada amb l'URL. És el component principal que s'utilitza per emmagatzemar tots els altres components.
• Rutes : és un component nou introduït a la v6 i una actualització del component. Els principals avantatges de Routes over Switch són:
  • S i s relatius
  • Les rutes es trien en funció de la millor coincidència en lloc de recórrer-les per ordre.
• Ruta: La ruta és el component que es mostra condicionalment que representa una IU quan el seu camí coincideix amb l'URL actual.
• Enllaç: El component d'enllaç s'utilitza per crear enllaços a diferents rutes i implementar la navegació per l'aplicació. Funciona com una etiqueta d'ancoratge HTML.

Implementació de React Router

Exemple: Aquest exemple mostra la navegació utilitzant react-router-dom cap a Home, About i Contact Components.

// 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 (    
  
  
  a casa  
  
  Sobre nosaltres  
  
  Contacta amb nosaltres  
  
    }>  }>  }>    
  );  } } exporta l'aplicació predeterminada;>>>JavascriptBenvinguts al món dels Geeks!; } exportar Inici predeterminat;>>>Javascript  
techcodeview.com és un portal informàtic per a frikis!
Llegeix més sobre nosaltres a: Ens pots trobar aquí: 
techcodeview.com 
5è i 6è pis, Royal Kapsons, A-118, 
Sector- 136, Noida, Uttar Pradesh (201305)); } exportar contacte predeterminat;>>> 
    Pas per executar l'aplicació:    Obriu el terminal i escriviu la següent comanda.
     Sortida:    Obriu el navegador i el nostre projecte es mostra a l'URL      http://localhost:3000/      . Ara, podeu fer clic als enllaços i navegar a diferents components. React Router manté la interfície d'usuari de l'aplicació sincronitzada amb l'URL.
  
Finalment, hem implementat correctament la navegació a la nostra aplicació React mitjançant React Router.