Conceptos básicos de React Router: BrowserRouter, rutas, explicación de Route y Link

La mayoría de las aplicaciones React pronto necesitan varias pantallas, como Inicio, Acerca de, Productos y Contacto. React en sí no tiene concepto de URLs, por lo que la asignación de direcciones a pantallas corresponde a una biblioteca, generalmente React Router. Cuatro de sus componentes cubren la mayor parte de las tareas de enrutamiento cotidianas: <BrowserRouter>, <Routes>, <Route> y <Link>. Una vez que sepas qué hace cada uno y cómo se anidan, podrás crear una aplicación de página única con múltiples páginas e explicarlo en una entrevista.

BrowserRouter conecta React con la URL

<BrowserRouter> es el propio enrutador. Permite el enrutamiento del lado del cliente a través de la API History del navegador, manteniendo la interfaz renderizada sincronizada con la barra de direcciones sin solicitar un nuevo documento al servidor.

Úselo cuando su aplicación deba exponer URLs distintas para sus pantallas mientras sigue funcionando como una sola página, por ejemplo:

/
/about
/products
/contact

La configuración consiste en envolver el árbol de componentes; todo lo que necesite enrutamiento debe encontrarse dentro de él:

import { BrowserRouter } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      {/* Application routes */}
    </BrowserRouter>
  );
}

Por lo general, se coloca una vez, en la raíz. Una consecuencia práctica es que, dado que rutas como /about son URLs reales, su servidor debe servir el mismo index.html para todas ellas; de lo contrario, al actualizar /about se obtiene un error 404 del servidor.

Las rutas determinan qué se renderiza

<Routes> es el contenedor para las definiciones de rutas. Cada vez que cambia la ubicación, compara la URL actual con sus elementos hijos y renderiza el que corresponda. Úselo siempre que React Router, y no condicionales escritos a mano, deba decidir qué pantalla se muestra:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/products" element={<Products />} />
</Routes>

Aquí un elemento <Routes> gestiona los tres caminos. Elige la mejor coincidencia en lugar de la primera que aparece, por lo que rara vez es necesario preocuparse por el orden.

Las rutas asignan un camino a un elemento

Cada <Route> relaciona un camino de URL con el componente que se mostrará, como una entrada en una tabla de consulta:

/about → About component
/products → Products component

Agregue uno para cada URL que deba renderizar algo específico. Las propiedades clave son path y element:

<Route
  path="/about"
  element={<About />}
/>

Con esa definición, al visitar esta dirección:

/about

React Router renderiza lo siguiente:

<About />

Tenga en cuenta que element recibe un elemento ya renderizado (<About />), no una referencia al componente, por lo que puede pasar las propiedades directamente. Varias rutas juntas se ven así:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

Si no hay ninguna ruta que coincida, nada se muestra en este bloque; una ruta genérica path="*" es la forma habitual de mostrar una pantalla de “no encontrado”.

Navegación por enlace sin recargar

<Link> permite mover al usuario entre rutas manteniendo la aplicación cargada. Renderiza un <a> normal en el DOM, pero intercepta el clic y deja que React Router se encargue de la navegación. Úsalo para la navegación interna, como en una barra de navegación:

import { Link } from "react-router-dom";
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Al hacer clic en Acerca de, se actualiza la URL, <Routes> se vuelve a evaluar y aparece la pantalla de Acerca de sin que el navegador se recargue, por lo que el diseño compartido y el estado en memoria permanecen intactos. Para sitios externos, un <a> simple sigue siendo la opción adecuada.

Combinando los cuatro elementos

Una configuración mínima completa (con Home, About y Contact definidos en otro lugar):

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Los enlaces y el bloque <Routes> son hermanos dentro de <BrowserRouter>: la navegación permanece visible en todas las páginas, mientras solo la región <Routes> cambia el contenido. En resumen, la jerarquía es:

BrowserRouter
      ↓
    Routes
      ↓
    Route
      ↓
  Component

<Link> se encuentra junto a esa cadena como el control que los usuarios hacen clic para cambiar la URL. Los ejemplos importan desde react-router-dom; las versiones recientes también exponen estas API desde el paquete react-router, así que consulte la documentación de su versión.

Preguntas de entrevista

• ¿Qué es <BrowserRouter>? Es el router que permite la navegación del lado del cliente y mantiene la interfaz de usuario sincronizada con la URL del navegador.

¿En qué difieren <Routes> y <Route>? <Routes> es el contenedor que coincide con la URL; cada <Route> define una ruta y el elemento que se renderizará.

¿En qué se diferencia <Link> de <a>? <Link> permite navegar en el cliente sin una recarga completa; un <a> normal hace que el navegador cargue nuevamente la URL.

¿Por qué preferir <Link> en una aplicación React Router? Permite que la aplicación sea de una sola página y evita recargas completas innecesarias.

¿Puede <Route> funcionar sin <BrowserRouter>? Normalmente no: los componentes de enrutamiento deben renderizarse dentro de un contexto de router como <BrowserRouter>.

Puntos clave

• <BrowserRouter> habilita el enrutamiento, una sola vez, en la raíz.
• <Routes> gestiona las rutas y muestra la que coincide.
• <Route> asocia una URL a un componente.
• <Link> permite pasar de una ruta a otra sin recargar la página.

Las rutas anidadas, los segmentos dinámicos, las rutas protegidas y los ganchos de navegación se basan todos en este mismo modelo. Para saber cómo React decide qué rerenderizar cuando cambia la ruta, consulte construyendo un modelo mental para la reconciliación de React y sus ganchos.

Lecturas relacionadas

• Construyendo un modelo mental para React: Reconciliación, estado y hooks — Aprende el razonamiento detrás de los conceptos fundamentales de React: reconciliación, componentes, props, estado y hooks, para desarrollar intuición en lugar de memorizar APIs.
• React 19.2 explicado: Activity, useEffectEvent y renderizado estático — Aprende cómo el nuevo componente Activity, el hook useEffectEvent y el renderizado estático parcial de React 19.2 solucionan los costos ocultos de rendimiento en las interfaces de usuario modernas.