Tutorial React: Introducción a React Router

¿Qué es React Router?

React Router es una biblioteca estándar para el enrutamiento en aplicaciones React. Proporciona una forma de declarar las rutas de tu aplicación, permitiendo la navegación entre diferentes componentes sin necesidad de recargar la página. Esta funcionalidad es esencial para construir aplicaciones de una sola página (SPA, por sus siglas en inglés).

El enrutamiento en una SPA implica definir varias rutas que corresponden a diferentes vistas o componentes de la aplicación. React Router maneja la sincronización entre la URL del navegador y el estado de la interfaz de usuario. Esto se logra a través de componentes específicos que React Router proporciona, como BrowserRouter, Routes, y Route.

Componentes principales de React Router

1. BrowserRouter: Este componente envuelve la aplicación y utiliza la API de la Historia del HTML5 para mantener la interfaz de usuario sincronizada con la URL del navegador. Es el contenedor principal que debe envolver toda la aplicación o al menos la parte de la aplicación que necesita enrutamiento.
2. Routes: Este componente actúa como un contenedor para definir todas las rutas de la aplicación. Dentro de Routes, se colocan múltiples componentes Route.
3. Route: Este componente define una ruta específica y el componente que se debe renderizar cuando la URL coincide con la ruta definida. Cada Route puede tener varias propiedades, siendo las más comunes path y element.

Instalación y configuración de React Router

Para instalar y configurar React Router en una aplicación React, primero debes asegurarte de tener Node.js y npm (o yarn) instalados en tu sistema.

Instalación de React Router

• Asegúrate de estar en el directorio raíz de tu proyecto React.
• Ejecuta el siguiente comando para instalar React Router:

npm install react-router-dom@6

Este comando instalará la última versión de React Router compatible con React.

Configuración básica de React Router

• Importa los componentes necesarios de react-router-dom en tu archivo principal de la aplicación, generalmente index.js o App.jsx.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

• Envuelve tu aplicación con el componente BrowserRouter. Este componente debe ser el contenedor principal que envuelve toda la aplicación o al menos la parte de la aplicación que necesita enrutamiento.

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

• Define las rutas dentro del componente Routes. Cada ruta se define utilizando el componente Route, especificando el path y el element que debe renderizarse cuando la URL coincide con la ruta.

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import Contact from './pages/Contact/Contact';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Rutas simples para diferentes componentes

Para definir rutas simples en una aplicación React utilizando React Router, se emplean los componentes BrowserRouter, Routes y Route. Estos permiten mapear URLs específicas a componentes de React, facilitando la navegación dentro de una SPA.

Vamos a definir algunos componentes básicos que utilizaremos para las rutas:

// pages/Home.jsx
export default function Home() {
  return <h1>Página de inicio</h1>;
}

// pages/About.jsx
export default function About() {
  return <h1>Sobre nosotros</h1>;
}

// pages/Contact.jsx
export default function Contact() {
  return <h1>Contacto</h1>;
}

Con los componentes definidos, procedemos a configurar las rutas en el archivo principal de la aplicación. En este ejemplo, App.jsx es el archivo principal:

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import Contact from './pages/Contact/Contact';

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

En este código, BrowserRouter envuelve toda la aplicación, habilitando las funcionalidades de enrutamiento. Dentro de Routes, se definen las rutas:

• La ruta raíz (/) renderiza el componente Home.
• La ruta /about renderiza el componente About.
• La ruta /contact renderiza el componente Contact.

Si deseas agregar navegación entre estas páginas, puedes usar los componentes Link y NavLink de react-router-dom:

// Navbar.jsx
import { Link } from 'react-router-dom';

export default function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Inicio</Link>
        </li>
        <li>
          <Link to="/about">Sobre nosotros</Link>
        </li>
        <li>
          <Link to="/contact">Contacto</Link>
        </li>
      </ul>
    </nav>
  );
}

Incorpora este componente de navegación en App.jsx para proporcionar enlaces de navegación:

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import Contact from './pages/Contact/Contact';
import Navbar from './components/Navbar/Navbar';

export default function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Con esta configuración, los enlaces de navegación permitirán a los usuarios moverse entre las diferentes rutas sin recargar la página. Esto demuestra cómo configurar rutas simples para diferentes componentes en una aplicación React utilizando React Router.

Link y NavLink

En React Router, Link y NavLink son componentes fundamentales para la navegación dentro de una aplicación React. Ambos se utilizan para crear enlaces que permiten a los usuarios moverse entre diferentes rutas sin recargar la página.

Link

El componente Link se utiliza para crear enlaces de navegación simples. Este componente reemplaza el uso de etiquetas <a> tradicionales, evitando la recarga de la página y mejorando la experiencia del usuario en aplicaciones de una sola página (SPA).

// Navbar.jsx
import { Link } from 'react-router-dom';

export default function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Inicio</Link>
        </li>
        <li>
          <Link to="/about">Sobre nosotros</Link>
        </li>
        <li>
          <Link to="/contact">Contacto</Link>
        </li>
      </ul>
    </nav>
  );
}

En este ejemplo, el componente Link se utiliza para crear enlaces de navegación a tres rutas diferentes: la página de inicio (/), la página "Sobre nosotros" (/about) y la página de contacto (/contact). Al hacer clic en estos enlaces, el navegador cambia la URL sin recargar la página.

NavLink

El componente NavLink es una extensión de Link que automáticamente aplica una clase active cuando la ruta coincide con la URL actual. Esto es útil para resaltar el enlace activo en una barra de navegación, permitiendo aplicar estilos específicos mediante CSS.

// Navbar.jsx
import { NavLink } from 'react-router-dom';

export default function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/">Inicio</NavLink>
        </li>
        <li>
          <NavLink to="/about">Sobre nosotros</NavLink>
        </li>
        <li>
          <NavLink to="/contact">Contacto</NavLink>
        </li>
      </ul>
    </nav>
  );
}

/* Aplica un estilo específico al enlace activo */
a.active {
  color: red;
}

En este ejemplo, NavLink aplica automáticamente la clase active al enlace correspondiente cuando su ruta coincide con la URL actual. Esto permite estilizar el enlace activo, como cambiar su color a rojo en este caso, mejorando la experiencia visual del usuario.

Uso avanzado de NavLink

NavLink permite personalizar el estilo y las clases CSS de los enlaces activos utilizando las propiedades className y style. Estas propiedades aceptan funciones que reciben un objeto con las propiedades isActive, isPending, y isTransitioning, permitiendo aplicar estilos y clases dinámicamente según el estado del enlace.

Uso de className La propiedad className funciona como una clase CSS normal, pero también puedes pasarle una función para personalizar las clases aplicadas en función de si el enlace está activo, pendiente o en transición.

// Navbar.jsx
import { NavLink } from 'react-router-dom';

export default function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink
            to="/"
            className={({ isActive, isPending, isTransitioning }) =>
              [
                isPending ? "pending" : "",
                isActive ? "active" : "",
                isTransitioning ? "transitioning" : "",
              ].join(" ")
            }
          >
            Inicio
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/about"
            className={({ isActive, isPending, isTransitioning }) =>
              [
                isPending ? "pending" : "",
                isActive ? "active" : "",
                isTransitioning ? "transitioning" : "",
              ].join(" ")
            }
          >
            Sobre nosotros
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/contact"
            className={({ isActive, isPending, isTransitioning }) =>
              [
                isPending ? "pending" : "",
                isActive ? "active" : "",
                isTransitioning ? "transitioning" : "",
              ].join(" ")
            }
          >
            Contacto
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

En este ejemplo, NavLink aplica clases CSS dinámicamente en función del estado del enlace:

• pending: Aplica esta clase cuando el enlace está en estado pendiente.
• active: Aplica esta clase cuando el enlace está activo.
• transitioning: Aplica esta clase durante una transición.

Uso de style De manera similar, la propiedad style se puede utilizar para aplicar estilos en línea dinámicos basados en el estado del enlace.

// Navbar.jsx
import { NavLink } from 'react-router-dom';

export default function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink
            to="/"
            style={({ isActive, isPending, isTransitioning }) => ({
              fontWeight: isActive ? "bold" : "",
              color: isPending ? "red" : "blue",
              viewTransitionName: isTransitioning ? "slide" : "",
            })}
          >
            Inicio
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/about"
            style={({ isActive, isPending, isTransitioning }) => ({
              fontWeight: isActive ? "bold" : "",
              color: isPending ? "red" : "blue",
              viewTransitionName: isTransitioning ? "slide" : "",
            })}
          >
            Sobre nosotros
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/contact"
            style={({ isActive, isPending, isTransitioning }) => ({
              fontWeight: isActive ? "bold" : "",
              color: isPending ? "red" : "blue",
              viewTransitionName: isTransitioning ? "slide" : "",
            })}
          >
            Contacto
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

En este ejemplo, NavLink aplica estilos dinámicos según el estado del enlace:

• fontWeight: Se establece en "bold" si el enlace está activo.
• color: Cambia a rojo si el enlace está pendiente y a azul si no lo está.
• viewTransitionName: Se aplica el estilo de transición "slide" si el enlace está en transición.

Con esta configuración, Link y NavLink proporcionan una navegación eficiente y dinámica en aplicaciones React, mejorando la experiencia del usuario mediante la navegación sin recargas de página y el resaltado de enlaces activos.