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.

c booleano

¿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:

carnero potineni

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:  
// Filename - component/contact.js import React from 'react'; function Contact() {  return (   
Puedes encontrarnos aquí: 
techcodeview.com 
Piso 5 y 6, Royal Kapsons, A-118, 
Sector- 136, Noida, Uttar Pradesh (201305)
); } exportar contacto predeterminado;>
  
    Paso para ejecutar la aplicación:    Abra la terminal y escriba el siguiente comando.
 
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.