# React Router
Semestre 01, 2026



## Problemática


Las aplicaciones React son SPA — Single Page Applications

* Solo existe un archivo `index.html`
* JavaScript controla qué se muestra
* El navegador nunca recarga la página


¿Cómo mantenemos la URL sincronizada con lo que se ve?


### Sin router: URL estancada

```
Usuario ve: /        → muestra Dashboard
Usuario hace clic   → muestra Perfil
URL sigue siendo: /  ← el navegador no sabe dónde está el usuario
```

Consecuencias:
* No puedes compartir un enlace directo
* El botón "atrás" no funciona como se espera
* El historial del navegador no refleja la navegación


### Con React Router: URL sincronizada

```
Usuario ve: /dashboard  → muestra Dashboard
Usuario hace clic       → muestra /perfil
URL cambia a: /perfil   ← el navegador lo sabe
```

* La URL refleja el estado de la UI
* El botón "atrás" funciona
* Los enlaces directos funcionan
* Sin recargar la página



## Configuración inicial


### Instalación

```bash
npm install react-router
```

React Router v7 — importaciones desde `"react-router"`


### Estructura base

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

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

* `BrowserRouter` — activa el router para toda la app
* `Routes` — contenedor de todas las rutas
* `Route` — asocia una URL con un componente


### Funcionamiento

```
URL del navegador: /productos
        ↓
React Router busca en <Routes>
        ↓
Encuentra path="/productos"
        ↓
Renderiza <Productos />
```

* Solo una `<Route>` se activa a la vez
* Si ninguna coincide: no renderiza nada
* Puedes agregar un `path="*"` para manejar 404


### Ruta 404

```jsx
<Routes>
  <Route path="/" element={<Inicio />} />
  <Route path="/productos" element={<Productos />} />
  <Route path="*" element={<PaginaNoEncontrada />} />
</Routes>
```

`path="*"` captura cualquier URL que no coincida con las anteriores



## Link


### El problema con `<a>`

```jsx
// ❌ MAL — recarga toda la página
<a href="/productos">Ver productos</a>
```

Al usar `<a>` normal:
* El navegador hace una petición HTTP completa
* React se desmonta y vuelve a montar
* Se pierde todo el state de la app


### `<Link>`

```jsx
import { Link } from "react-router";

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

* Usa `to=` en lugar de `href=`
* No recarga la página — actualiza la URL y renderiza el componente
* Se ve como un `<a>` en el HTML final


### `<NavLink>`

```jsx
import { NavLink } from "react-router";

function NavBar() {
  return (
    <nav>
      <NavLink
        to="/"
        className={({ isActive }) => isActive ? "activo" : ""}
      >
        Inicio
      </NavLink>
      <NavLink
        to="/productos"
        className={({ isActive }) => isActive ? "activo" : ""}
      >
        Productos
      </NavLink>
    </nav>
  );
}
```

* `isActive` es `true` cuando la URL coincide
* Útil para resaltar el ítem de menú actual



## useNavigate


### useNavigate

A veces la navegación ocurre por lógica, no por un clic directo

* Después de enviar un formulario → redirigir al usuario
* Después de iniciar sesión → ir al dashboard
* Después de un tiempo → redirigir automáticamente


### Uso básico

```jsx
import { useNavigate } from "react-router";

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

  function handleSubmit(e) {
    e.preventDefault();
    // ... validar credenciales ...
    navigate("/dashboard"); // ← redirige al usuario
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* campos del formulario */}
      <button type="submit">Iniciar sesión</button>
    </form>
  );
}
```


### Opciones de navegación

```jsx
const navigate = useNavigate();

// Ir a una ruta
navigate("/dashboard");

// Pasar datos con la navegación
navigate("/perfil", { state: { desde: "login" } });

// Volver a la página anterior
navigate(-1);

// Avanzar en el historial
navigate(1);
```

`navigate(-1)` equivale al botón "atrás" del navegador



## Rutas anidadas (Nested Routes)


### Rutas anidadas

Permiten que un componente padre comparta su layout con componentes hijos

```
/dashboard           → muestra Dashboard + Inicio
/dashboard/ajustes   → muestra Dashboard + Ajustes
/dashboard/perfil    → muestra Dashboard + Perfil
```

* El sidebar y el header del dashboard siempre están visibles
* Solo cambia el contenido central


### Configuración en el router

```jsx
<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route index element={<Inicio />} />
    <Route path="ajustes" element={<Ajustes />} />
    <Route path="perfil" element={<Perfil />} />
  </Route>
</Routes>
```

* Las rutas hijas se anidan dentro de la ruta padre
* `index` = componente por defecto cuando la URL es exactamente `/dashboard`
* Las rutas hijas heredan el path del padre


### El componente `<Outlet />`

```jsx
import { Outlet, Link } from "react-router";

function Dashboard() {
  return (
    <div className="dashboard">
      <aside>
        <Link to="/dashboard">Inicio</Link>
        <Link to="/dashboard/ajustes">Ajustes</Link>
        <Link to="/dashboard/perfil">Perfil</Link>
      </aside>

      <main>
        <Outlet /> {/* aquí se renderiza el hijo activo */}
      </main>
    </div>
  );
}
```

Sin `<Outlet />`, los componentes hijos nunca aparecen


### Funcionamiento del Outlet

```
URL: /dashboard/ajustes

<Dashboard />          ← siempre visible
  <aside>...</aside>
  <main>
    <Outlet />       ← React Router inserta aquí:
    <Ajustes />      ← el componente que coincide con la URL
  </main>
```

* El padre define la estructura
* El hijo llena el `<Outlet />`


### Error común: olvidar el Outlet

```jsx
// ❌ MAL — sin Outlet, los hijos nunca se muestran
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* no hay <Outlet /> */}
    </div>
  );
}

// ✅ BIEN — con Outlet, los hijos se renderizan
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}
```



## Rutas dinámicas


### Rutas dinámicas

Cuando la URL contiene un valor variable

```
/productos/1      → detalles del producto con ID 1
/productos/42     → detalles del producto con ID 42
/usuarios/ana     → perfil de la usuaria "ana"
```

No podemos crear una ruta por cada ID — usamos parámetros


### Configuración

```jsx
<Routes>
  <Route path="/productos" element={<ListaProductos />} />
  <Route path="/productos/:id" element={<DetalleProducto />} />
</Routes>
```

`:id` — el `:` indica que es un parámetro de ruta

Coincide con:
* `/productos/1` → `id = "1"`
* `/productos/laptop` → `id = "laptop"`
* `/productos/abc123` → `id = "abc123"`


### Leer el parámetro: useParams

```jsx
import { useParams } from "react-router";

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

  return (
    <div>
      <h1>Producto #{id}</h1>
      <p>Cargando información del producto {id}...</p>
    </div>
  );
}
```

`useParams()` devuelve un objeto con todos los parámetros de la URL


### Navegar a rutas dinámicas

```jsx
// Con Link
<Link to={`/productos/${producto.id}`}>
  Ver {producto.nombre}
</Link>

// Con useNavigate
const navigate = useNavigate();
navigate(`/productos/${producto.id}`);
```

Se construye la URL con template literals



## Principios clave


* Las URLs deben reflejar el estado de la UI
* Usa `<Link>` para navegación visual, `useNavigate` para lógica
* Las rutas anidadas necesitan siempre un `<Outlet />`
* Los parámetros dinámicos se leen con `useParams`