React Router DOM es un paquete npm que le permite implementar enrutamiento dinámico en una aplicación web. Le permite mostrar páginas y permitir que los usuarios naveguen por ellas. Es una biblioteca de enrutamiento del lado del servidor y del cliente con todas las funciones para React. React Router Dom se utiliza para crear aplicaciones de una sola página, es decir, aplicaciones que tienen muchas páginas o componentes, pero la página nunca se actualiza, sino que el contenido se recupera dinámicamente en función de la URL. Este proceso se llama Enrutamiento y es posible con la ayuda de React Router Dom.
La principal ventaja de react-router es que la página no tiene que actualizarse cuando se hace clic en un enlace a otra página, por ejemplo. Además, es rápido, muy rápido en comparación con la navegación tradicional por páginas. Esto significa que la experiencia del usuario es mejor y la aplicación tiene un mejor rendimiento general.
React Router Dom tiene muchos componentes útiles y para crear un enrutamiento completamente funcional, necesita la mayoría de estos.
- Enrutador (generalmente importado como BrowserRouter): es el componente principal que se usa para almacenar todos los demás componentes. Todo dentro de esto será parte de la funcionalidad de enrutamiento
- Switch: el componente Switch se usa para representar solo la primera ruta que coincide con la ubicación en lugar de representar todas las rutas coincidentes.
- Ruta: este componente verifica la URL actual y muestra el componente asociado con esa ruta exacta. Todas las rutas se colocan dentro de los componentes del conmutador.
- Enlace: el componente de enlace se utiliza para crear enlaces a diferentes rutas.
El componente Ruta toma 2 parámetros. El primero es la ruta que estará en la URL y el segundo es el componente que se mostrará si la URL actual coincide con la ruta en el primer parámetro.
Ejemplo: a continuación se muestra un ejemplo en el que creamos una aplicación de reacción simple utilizando React Router Dom. La aplicación contendrá 4 páginas. es decir, 1 página de inicio y 3 páginas de muestra. El usuario navegará entre estas páginas con la ayuda de enrutamiento y enlaces.
A continuación se muestra la implementación paso a paso:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:
cd foldername
Estructura del proyecto: el directorio de su proyecto puede tener este aspecto.
Haremos la mayor parte de nuestro trabajo en el archivo app,js que se encuentra en la carpeta src .
Paso 3: A continuación, instale reaccionar router dom usando el siguiente comando
npm install react-router-dom
Paso 4: Ahora, crea una nueva carpeta en src llamada Componentes. Dentro de esta carpeta, cree 3 archivos:
- página1.js
- página2.js
- página3.js
Agregue el siguiente código a todas las páginas:
page1.js
import React from 'react' export default function Page1() { return ( <div> <h1>Page 1</h1> </div> ) }
page2.js
import React from 'react' export default function Page2() { return ( <div> <h1>Page 2</h1> </div> ) }
page3.js
import React from 'react' export default function Page3() { return ( <div> <h1>Page 3</h1> </div> ) }
Estructura del proyecto: ahora tendrá el siguiente aspecto.
Paso 5: Ahora, importe los componentes necesarios para la demostración dentro de App.js. Luego agregue el siguiente código en App.js. Aquí estamos primero importando las 3 páginas, luego dentro del enrutador se agrega un conmutador. dentro del Switch se agregan 4 Rutas, una para la página de inicio y 3 para las demás páginas. La lista contiene enlaces en los que un usuario puede hacer clic para navegar.
App.js
import { BrowserRouter as Router, Route, Link, Switch} from "react-router-dom"; // Import the pages import Page1 from "./Components/page1" import Page2 from "./Components/page2" import Page3 from "./Components/page3" // Import css import "./app.css" function App() { return ( <div className="App"> <Router> <Switch> <Route exact path="/" element={<h1>Home Page</h1>} /> <Route exact path="page1" element={<Page1 />} /> <Route exact path="page2" element={<Page2 />} /> <Route exact path="page3" element={<Page3 />} /> </Switch> <div className="list"> <ul> <li><Link to="/">Home</Link></li> <li><Link to="page1">Page 1</Link></li> <li><Link to="page2">Page 2</Link></li> <li><Link to="page3">Page 3</Link></li> </ul> </div> </Router> </div> ); } export default App;
Paso 6: puede mejorar el diseño y hacer que la aplicación sea más presentable utilizando el siguiente CSS. Agréguelo a App.css (créelo si aún no está allí).
App.css
* { padding: 0; margin: 0; } h1 { text-align: center; font-size: 45px; font-family: Arial, Helvetica, sans-serif; color: rgb(6, 0, 32); padding: 40px; } .list { display: flex; justify-content: center; width: 100%; } .list ul li { list-style: none; margin: 42px; text-align: center; } a { text-decoration: none; color: rgb(0, 0, 0); font-size: 18px; font-family: Arial, Helvetica, sans-serif; padding: 14px 25px; background-color: transparent; border: 2px solid rgb(12, 0, 66); } a:hover { background-color: rgb(12, 0, 66); color: rgb(255, 255, 255); }
Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.
npm start
Producción:
Publicación traducida automáticamente
Artículo escrito por salehmubashar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA