Cuando una aplicación desarrollada con React empieza a crecer, es habitual que necesite diferentes páginas o vistas: una página de inicio, una sección de productos, un apartado de contacto, un perfil de usuario o una página de configuración. Para gestionar la navegación entre estas vistas existe una herramienta especialmente conocida en el ecosistema de React: React Router.

Gracias a React Router es posible crear diferentes rutas dentro de una aplicación sin necesidad de recargar completamente la página cada vez que el usuario cambia de sección.

¿Qué es React Router?

React Router es una biblioteca utilizada para gestionar la navegación y las rutas en aplicaciones desarrolladas con React.

Una aplicación React puede funcionar como una SPA, es decir, una aplicación de una sola página. En este tipo de aplicaciones, el navegador carga inicialmente la aplicación y posteriormente React puede cambiar el contenido mostrado sin realizar una recarga completa del documento.

React Router permite asociar determinadas direcciones URL con componentes concretos.

Por ejemplo:

/
/productos
/contacto
/perfil

Cada una de estas rutas puede mostrar una parte diferente de la aplicación.

¿Para qué sirve el routing en React?

El routing es el sistema encargado de determinar qué contenido debe mostrarse dependiendo de la dirección que visite el usuario.

Imagina una aplicación con estas páginas:

Inicio
Productos
Contacto

Podríamos establecer:

/              → Inicio
/productos     → Productos
/contacto      → Contacto

De esta forma, cuando el usuario visita /productos, React Router puede mostrar el componente correspondiente a la sección de productos.

Esto permite construir aplicaciones más completas y organizadas.

Instalar React Router

Para comenzar a utilizar React Router en un proyecto React moderno puedes instalar el paquete correspondiente mediante npm:

npm install react-router-dom

Si utilizas otro gestor de paquetes, como Yarn o pnpm, también puedes instalar la biblioteca mediante el comando equivalente.

Una vez instalada, podrás importar los componentes necesarios desde react-router-dom.

Crear las primeras rutas

Una configuración básica puede utilizar BrowserRouter, Routes y Route.

Por ejemplo:

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/productos" element={<Productos />} />
        <Route path="/contacto" element={<Contacto />} />
      </Routes>
    </BrowserRouter>
  );
}

En este ejemplo, cada dirección está asociada con un componente diferente.

Cuando el usuario visita /, verá Inicio. Si entra en /productos, aparecerá Productos, mientras que /contacto mostrará el componente Contacto.

¿Qué hace BrowserRouter?

BrowserRouter proporciona el contexto de navegación que necesitan los componentes de React Router.

Normalmente se coloca en un nivel superior de la aplicación para que las diferentes rutas puedan acceder al sistema de navegación.

Una estructura sencilla podría ser:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* rutas */}
      </Routes>
    </BrowserRouter>
  );
}

De esta forma, los componentes que se encuentran dentro de BrowserRouter pueden utilizar las funcionalidades de navegación de React Router.

¿Qué son Routes y Route?

Routes actúa como contenedor de las diferentes rutas que puede utilizar la aplicación.

Dentro de él se definen los componentes Route.

Por ejemplo:

<Routes>
  <Route path="/" element={<Inicio />} />
  <Route path="/productos" element={<Productos />} />
  <Route path="/contacto" element={<Contacto />} />
</Routes>

La propiedad path indica la dirección que debe coincidir.

La propiedad element especifica el componente que se mostrará cuando esa ruta sea seleccionada.

Crear enlaces de navegación

Una vez creadas las rutas, podemos permitir que el usuario se mueva entre ellas mediante Link.

Por ejemplo:

import { Link } from "react-router-dom";

function Menu() {
  return (
    <nav>
      <Link to="/">Inicio</Link>
      <Link to="/productos">Productos</Link>
      <Link to="/contacto">Contacto</Link>
    </nav>
  );
}

Esto permite crear enlaces internos que funcionan con el sistema de navegación de React Router.

Una de las ventajas de utilizar Link en lugar de enlaces HTML tradicionales para este tipo de navegación es que React Router puede gestionar el cambio de ruta dentro de la aplicación.

Link frente a un enlace HTML

Un enlace HTML convencional utiliza:

<a href="/productos">Productos</a>

En una aplicación React con React Router es habitual utilizar:

<Link to="/productos">Productos</Link>

Link está diseñado específicamente para trabajar con el sistema de rutas de React Router.

Esto permite realizar navegación interna sin depender de una recarga completa del documento.

Navegar mediante código

En determinadas situaciones no queremos que el usuario pulse un enlace. Por ejemplo, después de iniciar sesión correctamente podríamos querer enviarlo automáticamente a su perfil.

Para ello podemos utilizar useNavigate.

import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  function entrar() {
    navigate("/perfil");
  }

  return (
    <button onClick={entrar}>
      Entrar
    </button>
  );
}

Cuando se ejecuta navigate("/perfil"), la aplicación cambia a esa ruta.

Esto resulta útil para formularios, procesos de autenticación, botones y otras acciones.

Rutas dinámicas

Una aplicación puede necesitar rutas cuyo contenido dependa de un identificador.

Por ejemplo:

/productos/25
/productos/26
/productos/27

En lugar de crear una ruta diferente para cada producto, podemos utilizar un parámetro dinámico:

<Route path="/productos/:id" element={<Producto />} />

En este caso, :id representa una parte variable de la URL.

Dentro del componente podemos obtener ese valor utilizando useParams.

import { useParams } from "react-router-dom";

function Producto() {
  const { id } = useParams();

  return <h1>Producto {id}</h1>;
}

Si el usuario visita /productos/25, el valor de id será 25.

Rutas anidadas

Las aplicaciones más complejas pueden tener secciones con diferentes páginas internas.

Por ejemplo:

/perfil
/perfil/configuracion
/perfil/pedidos

React Router permite crear rutas anidadas para organizar este tipo de estructuras.

Una ruta principal puede contener otras rutas relacionadas:

<Route path="/perfil" element={<Perfil />}>
  <Route path="configuracion" element={<Configuracion />} />
  <Route path="pedidos" element={<Pedidos />} />
</Route>

Para mostrar las rutas hijas dentro del componente padre se utiliza Outlet.

import { Outlet } from "react-router-dom";

function Perfil() {
  return (
    <div>
      <h1>Mi perfil</h1>
      <Outlet />
    </div>
  );
}

De esta manera, el contenido de las rutas secundarias aparece en el lugar donde se encuentra Outlet.

Crear una página para rutas inexistentes

También podemos establecer una ruta para mostrar una página cuando el usuario introduce una dirección que no existe.

Por ejemplo:

<Route path="*" element={<PaginaNoEncontrada />} />

El asterisco permite utilizar esta ruta como alternativa cuando ninguna de las anteriores coincide.

Una página 404 personalizada puede mejorar la experiencia del usuario y ofrecerle un enlace para regresar a la página principal.

ActiveNavLink para menús

React Router también dispone de NavLink, que resulta especialmente útil para menús de navegación.

Por ejemplo:

import { NavLink } from "react-router-dom";

<NavLink to="/productos">
  Productos
</NavLink>

NavLink permite detectar cuándo un enlace corresponde a la ruta actualmente activa y aplicar diferentes estilos.

Esto resulta práctico para menús donde queremos destacar visualmente la sección en la que se encuentra el usuario.

¿React Router es obligatorio en React?

No.

React no obliga a utilizar React Router. Es una biblioteca independiente que puede utilizarse cuando una aplicación necesita un sistema de rutas más completo.

En una aplicación muy pequeña quizá no sea necesario. Sin embargo, cuando existen diferentes vistas y direcciones URL, una biblioteca de routing puede facilitar considerablemente la organización del proyecto.

También existen otras soluciones y frameworks del ecosistema React que incorporan sus propios sistemas de navegación.

Ventajas de utilizar React Router

React Router proporciona diferentes herramientas para gestionar aplicaciones con múltiples rutas.

Entre sus posibilidades encontramos:

• Creación de rutas.
• Navegación entre páginas.
• Parámetros dinámicos.
• Rutas anidadas.
• Páginas 404.
• Navegación mediante código.
• Enlaces activos.
• Organización de diferentes vistas dentro de una aplicación React.

Todo ello permite construir interfaces más completas sin tener que desarrollar desde cero un sistema de navegación.

Un ejemplo completo

Una estructura sencilla podría quedar así:

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function Inicio() {
  return <h1>Inicio</h1>;
}

function Productos() {
  return <h1>Productos</h1>;
}

function Contacto() {
  return <h1>Contacto</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Inicio</Link>
        <Link to="/productos">Productos</Link>
        <Link to="/contacto">Contacto</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/productos" element={<Productos />} />
        <Route path="/contacto" element={<Contacto />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Con este ejemplo ya tendríamos una aplicación básica con tres rutas y un menú para desplazarnos entre ellas.

¿Qué debes aprender antes de React Router?

Para aprovechar React Router es recomendable tener unos conocimientos básicos de React, especialmente componentes, propiedades, estado y hooks.

También es importante comprender cómo funcionan las URLs y la navegación web.

Si estás comenzando con React, la documentación oficial de React es un buen punto de partida para conocer los fundamentos de la biblioteca antes de introducir un sistema de routing.

En resumen

React Router permite gestionar la navegación y las diferentes rutas de una aplicación desarrollada con React.

Con herramientas como BrowserRouter, Routes, Route, Link, NavLink, useNavigate y useParams, es posible crear desde una navegación sencilla hasta estructuras con rutas dinámicas y anidadas.

El funcionamiento básico es fácil de entender: se define una URL, se asocia con un componente y React Router se encarga de mostrar ese componente cuando el usuario accede a la ruta correspondiente.

Para proyectos pequeños puede no ser imprescindible, pero cuando una aplicación React necesita varias páginas o vistas, el routing se convierte en una parte fundamental de su estructura.