¿Qué es reaccionar-router-dom?

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.

1. 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
2. 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.
3. 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.
4. 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:

1. página1.js
2. página2.js
3. página3.js

Agregue el siguiente código a todas las páginas:

import React from 'react'
  
export default function Page1() {
    return (
        <div>
            <h1>Page 1</h1>
        </div>
    )
}

import React from 'react'
  
export default function Page2() {
    return (
        <div>
            <h1>Page 2</h1>
        </div>
    )
}

import React from 'react'
  
export default function Page3() {
    return (
        <div>
            <h1>Page 3</h1>
        </div>
    )
}

Estructura del proyecto: ahora tendrá el siguiente aspecto. 

Directorio de proyectos

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.

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í).

* {
    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: