Cómo usar React Router

React Router es una de las librerías más populares para manejar la navegación en aplicaciones React. Permite crear aplicaciones de una sola página (SPA, Single Page Application).

En el desarrollo web tradicional (Multi-Page Application), cada vez que hacíamos clic en un enlace, el navegador pedía un archivo HTML nuevo al servidor. La pantalla se ponía en blanco un instante y se cargaba todo de nuevo.

Cuando el usuario “navega”, no pedimos nada al servidor. Simplemente, JavaScript intercepta la URL y cambia el contenido de la pantalla instantáneamente. Sin pantallazos blancos ni recargas.

Para lograr esto, necesitamos el estándar: React Router 👇.

Instalación

React no trae un enrutador de serie (a diferencia de Angular). La librería oficial de facto es react-router.

Para instalarla, vamos a la terminal de nuestro proyecto y ejecutamos:

Configuración del router principal

Para que el enrutador pueda controlar nuestra URL y el historial del navegador, necesita “envolver” a toda nuestra aplicación. El lugar ideal para hacer esto es nuestro punto de entrada: src/main.jsx.

Vamos a importar el componente BrowserRouter y usarlo como padre de nuestro <App />.

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router' // <--- 1. Importamos
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* 2. Envolvemos la App con el Router */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

A partir de ahora, cualquier componente dentro de <App /> (es decir, toda la aplicación) tiene navegación.

Definiendo nuestras primeras rutas

Ahora vamos a src/App.jsx. Aquí es donde definiremos el “mapa” de nuestra web. Necesitamos importar dos piezas clave:

Vamos a limpiar nuestro App.jsx y crear una estructura básica:

// src/App.jsx
import { Routes, Route } from 'react-router';

// Componentes "tontos" para probar (luego los moveremos a archivos propios)
const Home = () => <h1>Página de Inicio 🏠</h1>;
const About = () => <h1>Sobre Nosotros 👥</h1>;
const Contacto = () => <h1>Contacto 📧</h1>;

function App() {
  return (
    <div className="App">
      <header>Mi Web SPA</header>
      
      {/* Zona de contenido cambiante */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contacto" element={<Contacto />} />
      </Routes>
      
      <footer>Pie de página fijo</footer>
    </div>
  );
}

export default App;

La ruta 404 (Not Found)

¿Qué pasa si el usuario escribe una URL que no existe, como /lo-que-sea? Por defecto, React Router no renderizará nada dentro de <Routes>.

Para mostrar una página de error 404 personalizada, usamos el comodín *.

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  
  {/* Ruta de descarte / 404 */}
  <Route path="*" element={<h1>404 - Página no encontrada 😱</h1>} />
</Routes>