Reaccionar enrutador , es su herramienta esencial para crear aplicaciones de una sola página (SPA). Imagine a los usuarios haciendo la transición sin esfuerzo entre secciones, experimentando su sitio web como una aplicación fluida y React Router lo hace posible, allanando el camino para una experiencia de usuario agradable y una presencia web moderna. Un sitio web de React no debería significar que una página grande se recargue cada vez que los usuarios navegan.

Este artículo lo ayudará a guiarse en el mundo de React Router y aprenderá sobre el concepto de React Router y sus capacidades. ¡Estén atentos para desbloquear el potencial de una navegación fluida y elevar sus proyectos de React al siguiente nivel!

Tabla de contenidos

• ¿Qué es un enrutador React?
• Pasos para utilizar el enrutador React
• Componentes del enrutador reaccionar
• Implementación del enrutador React

Como no hay enrutamiento incorporado en React, React JS Router permite el soporte de enrutamiento en React y la navegación a diferentes componentes en aplicaciones de varias páginas. Representa componentes para las rutas correspondientes y las URL asignadas.

¿Qué es un enrutador React?

Reaccionar enrutador es una biblioteca estándar para enrutamiento en Reaccionar . Permite la navegación entre vistas de varios componentes en una aplicación React, permite cambiar la URL del navegador y mantiene la interfaz de usuario sincronizada con la URL. Creemos una aplicación simple para React para comprender cómo funciona React Router. La aplicación contendrá tres componentes: componente del hogar , el Acerca del componente , y el componente de contacto . Usaremos React Router para navegar entre estos componentes.

Pasos para utilizar el enrutador React

Paso 1: Inicialice un proyecto de reacción. Revisa esta publicación para configurando la aplicación React

Paso 2: Instale reaccionar-router en su aplicación, escriba el siguiente comando en su terminal

npm i react-router-dom 

Paso 3: Importación del enrutador React

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

Estructura de carpetas:

Las dependencias actualizadas en paquete.json archivo.

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

Componentes del enrutador reaccionar

Los componentes principales de React Router son:

• NavegadorEnrutador : BrowserRouter es una implementación de enrutador que utiliza la API de historial HTML5 (pushState, replaceState y el evento popstate) para mantener su interfaz de usuario sincronizada con la URL. Es el componente principal que se utiliza para almacenar todos los demás componentes.
• Rutas : Es un componente nuevo introducido en la versión 6 y una actualización del componente. Las principales ventajas de Routes sobre Switch son:
  • S y s relativos
  • Las rutas se eligen en función de la mejor coincidencia en lugar de recorrerse en orden.
• Ruta: Ruta es el componente que se muestra condicionalmente y que representa alguna interfaz de usuario cuando su ruta coincide con la URL actual.
• Enlace: El componente de enlace se utiliza para crear enlaces a diferentes rutas e implementar la navegación por la aplicación. Funciona como una etiqueta de anclaje HTML.

Implementación del enrutador React

Ejemplo: Este ejemplo muestra la navegación usando react-router-dom a los componentes Inicio, Acerca de y Contacto.

// 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 (      
   
   
   Hogar    
   
   Sobre nosotros    
   
   Contáctenos    
   
      }>    }>    }>       
   );  } } exportar la aplicación predeterminada; 

// Filename - component/home.js import React from 'react'; function Home() {  return  
¡Bienvenido al mundo de los frikis! 
; } exportar inicio predeterminado; 

// Filename - component/about.js import React from 'react'; function About() {  return (   
   
¡techcodeview.com es un portal de informática para geeks! 
Lea más sobre nosotros en: Puedes encontrarnos aquí: 
techcodeview.com 
Piso 5 y 6, Royal Kapsons, A-118, 
Sector- 136, Noida, Uttar Pradesh (201305) ); } exportar contacto predeterminado; 

npm start 

Producción: Abra el navegador y nuestro proyecto se muestra en la URL. http://localhost:3000/ . Ahora podemos hacer clic en los enlaces y navegar a diferentes componentes. React Router mantiene la interfaz de usuario de su aplicación sincronizada con la URL.

Finalmente, hemos implementado con éxito la navegación en nuestra aplicación React usando React Router.