Routing con React Router (conceptual)

¿Por qué un router?

Una aplicación React es, por defecto, una SPA (single-page application): una sola página de HTML cuyo contenido cambia con JavaScript. Para que distintas URLs (/, /productos, /productos/42) muestren vistas distintas sin recargar la página, se usa una librería de routing. La más extendida es React Router.

En estos ejercicios el router no está disponible en el runtime: esta lección es conceptual. Aprenderás a leer y razonar sobre el código; las comprobaciones de routing se hacen con cuestionarios.

Definir las rutas: <BrowserRouter>, <Routes> y <Route>

Se envuelve la aplicación en un <BrowserRouter> y se declaran las rutas con <Routes> y <Route>. Cada <Route> asocia un path a un componente mediante la prop element:

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

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

El router observa la URL del navegador y renderiza el element de la primera ruta que coincide. Cambiar de vista no recarga la página: solo se intercambia el subárbol de React, conservando el estado del resto de la SPA.

Navegar sin recargar: <Link>

Para movernos entre rutas usamos <Link> en lugar de un <a> normal. Un <a href> provocaría una recarga completa de la página; <Link> cambia la URL y deja que el router intercambie la vista:

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

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

Parámetros de ruta: useParams

Fíjate en path="/productos/:id": los segmentos dinámicos empiezan por :. Dentro del componente de esa ruta, el hook useParams devuelve un objeto con esos parámetros tomados de la URL:

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

function Producto() {
  const { id } = useParams(); // en /productos/42 → id === "42"
  return <h1>Producto número {id}</h1>;
}

Así, una sola ruta y un solo componente sirven para infinitas páginas de producto.

Navegar por código: useNavigate

A veces no quieres un enlace, sino navegar como consecuencia de una acción (tras enviar un formulario, al hacer login...). Para eso está el hook useNavigate, que devuelve una función:

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

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

  function alEnviar() {
    // ...lógica de login...
    navigate("/panel"); // redirige a /panel
  }

  return <button onClick={alEnviar}>Entrar</button>;
}

Resumen mental: <Route> declara qué se ve en cada URL, <Link> y useNavigate cambian de URL, y useParams lee los trozos dinámicos.