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

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

Configuración básica de React Router

• Primero, envuelve tu aplicación con BrowserRouter en el archivo principal:

// src/main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
)

Estructura de proyecto recomendada

• Suponiendo que organizamos el proyecto con la siguiente estructura:

src/
├── components/
│   ├── Layout/
│   │   └── Layout.jsx
│   └── Navbar/
│       └── Navbar.jsx
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── Contact.jsx
├── App.jsx
├── main.jsx
└── index.css

Definiendo rutas básicas

Componentes de página

• Crea componentes simples para cada página:

// src/pages/Home.jsx
export default function Home() {
  return (
    <div>
      <h1>Página de inicio</h1>
      <p>Bienvenido a nuestra aplicación React con enrutamiento</p>
    </div>
  )
}

// src/pages/About.jsx
export default function About() {
  return (
    <div>
      <h1>Sobre nosotros</h1>
      <p>Información sobre nuestra empresa</p>
    </div>
  )
}

// src/pages/Contact.jsx
export default function Contact() {
  return (
    <div>
      <h1>Contacto</h1>
      <p>Ponte en contacto con nosotros</p>
    </div>
  )
}

Configuración de rutas

• Define las rutas en tu componente App.jsx:

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

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

Navegación con Link y NavLink

Link básico

• Link crea enlaces que navegan sin recargar la página:

// src/components/Navbar/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>
  )
}

NavLink con estilos activos

• NavLink permite aplicar estilos al enlace activo:

// src/components/Navbar/Navbar.jsx
import { NavLink } from 'react-router-dom'
import './Navbar.css'

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

El atributo end en la ruta raíz evita que permanezca activa en rutas hijas.

Estilos CSS para NavLink

/* src/components/Navbar/Navbar.css */
nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
}

nav a {
  text-decoration: none;
  color: #333;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: #f0f0f0;
}

nav a.active {
  background-color: #007bff;
  color: white;
}

nav a.pending {
  opacity: 0.6;
}

NavLink avanzado con clases dinámicas

• Para mayor control sobre las clases CSS:

import { NavLink } from 'react-router-dom'

export default function Navbar() {
  const getNavLinkClass = ({ isActive, isPending }) => {
    return `nav-link ${isActive ? 'active' : ''} ${isPending ? 'pending' : ''}`
  }

  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" end className={getNavLinkClass}>
            Inicio
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" className={getNavLinkClass}>
            Sobre nosotros
          </NavLink>
        </li>
        <li>
          <NavLink to="/contact" className={getNavLinkClass}>
            Contacto
          </NavLink>
        </li>
      </ul>
    </nav>
  )
}

NavLink con estilos inline

• También puedes aplicar estilos inline dinámicamente:

import { NavLink } from 'react-router-dom'

export default function Navbar() {
  const getNavLinkStyle = ({ isActive, isPending }) => ({
    fontWeight: isActive ? 'bold' : 'normal',
    color: isPending ? '#999' : isActive ? '#007bff' : '#333',
    textDecoration: 'none',
    padding: '0.5rem 1rem',
  })

  return (
    <nav>
      <ul style={{ listStyle: 'none', display: 'flex', gap: '1rem' }}>
        <li>
          <NavLink to="/" end style={getNavLinkStyle}>
            Inicio
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" style={getNavLinkStyle}>
            Sobre nosotros
          </NavLink>
        </li>
        <li>
          <NavLink to="/contact" style={getNavLinkStyle}>
            Contacto
          </NavLink>
        </li>
      </ul>
    </nav>
  )
}

Layout con navegación persistente

• Crea un layout que mantenga la navegación visible en todas las páginas:

// src/components/Layout/Layout.jsx
import { Outlet } from 'react-router-dom'
import Navbar from '../Navbar/Navbar'

export default function Layout() {
  return (
    <div className="app-layout">
      <header>
        <Navbar />
      </header>
      <main>
        <Outlet />
      </main>
      <footer>
        <p>&copy; 2025 Mi Aplicación</p>
      </footer>
    </div>
  )
}

• Actualiza App.jsx para usar el layout:

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

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

Manejo de rutas no encontradas (404)

• Agrega una página para rutas no existentes:

// src/pages/NotFound.jsx
import { Link } from 'react-router-dom'

export default function NotFound() {
  return (
    <div>
      <h1>404 - Página no encontrada</h1>
      <p>Lo sentimos, la página que buscas no existe.</p>
      <Link to="/">Volver al inicio</Link>
    </div>
  )
}

// En App.jsx, agrega esta ruta al final
<Route path="*" element={<NotFound />} />

Propiedades adicionales de Link

• Link acepta varias propiedades útiles:

// replace: reemplaza la entrada actual en el historial
<Link to="/about" replace>
  Sobre nosotros
</Link>

// state: pasa datos a la nueva ruta
<Link to="/contact" state={{ from: 'navbar' }}>
  Contacto
</Link>

// preventScrollReset: evita el scroll al inicio
<Link to="/about" preventScrollReset>
  Sobre nosotros
</Link>

Mejores prácticas

• Usa NavLink para navegación principal: Proporciona retroalimentación visual del enlace activo.
• Implementa un layout común: Utiliza Outlet para mantener elementos persistentes como navegación y footer.
• Maneja rutas 404: Siempre incluye una ruta catch-all para páginas no encontradas.
• Organiza tus rutas: Mantén las definiciones de rutas claras y ordenadas, agrupando rutas relacionadas.
• Optimiza con lazy loading: Para aplicaciones grandes, considera cargar componentes de forma diferida:

import { lazy, Suspense } from 'react'

const About = lazy(() => import('./pages/About'))

// En tus rutas
<Route 
  path="about" 
  element={
    <Suspense fallback={<div>Cargando...</div>}>
      <About />
    </Suspense>
  } 
/>