React Router y Navegación - Explicación para Principiantes

📚 Conceptos Básicos

¿Qué es React Router?

Es una biblioteca que nos permite crear aplicaciones web con múltiples páginas dentro de una sola página (Single Page Application).

¿Cómo funciona?

• Sin React Router: Cuando cambias de página, el navegador recarga todo.

• Con React Router: Solo cambia la parte del contenido, sin recargar toda la página (más rápido).

---

🎯 ¿Qué vamos a hacer? (Paso a Paso)

Paso 1: Preparar 3 "páginas" (componentes)

Imagina que tenemos 3 archivos:

1. ListaPeliculas.js - Muestra todas las películas

2. DetallePelicula.js - Muestra una película específica

3. AgregarPelicula.js - Para añadir nuevas

jsx

// Ejemplo: ListaPeliculas.js
function ListaPeliculas() {
  return (
    <div>
      <h1>🎬 Lista de Películas</h1>
      <p>Aquí van todas las películas...</p>
    </div>
  );
}

---

Paso 2: Instalar el "GPS" de nuestra app

bash

npm install react-router-dom

Esto instala las herramientas para navegar.

---

Paso 3: Poner el GPS en toda la app

En index.js:

jsx

import { BrowserRouter } from 'react-router-dom';

// Envolvemos toda la app con el GPS
<BrowserRouter>
  <App />
</BrowserRouter>

Esto hace que toda la aplicación pueda usar la navegación.

---

Paso 4: Crear el Menú de Navegación

En App.js:

jsx

// 1. Importar las herramientas
import { Link, Route, Switch } from 'react-router-dom';

// 2. Crear menú con LINKS (no con <a>)
<nav>
  <Link to="/">Inicio</Link>         {/* Como <a href="/"> pero mejor */}
  <Link to="/peliculas">Películas</Link>
  <Link to="/agregar">Agregar</Link>
</nav>

// 3. Definir qué se muestra en cada ruta
<div className="contenido">
  <Switch>  {/* Como un interruptor: muestra solo UNA ruta */}
    
    {/* Ruta 1: Página de inicio */}
    <Route exact path="/">
      <ListaPeliculas />
    </Route>
    
    {/* Ruta 2: Detalle de película */}
    <Route path="/pelicula/:id">
      <DetallePelicula />
    </Route>
    
    {/* Ruta 3: Agregar nueva */}
    <Route path="/agregar">
      <AgregarPelicula />
    </Route>
    
  </Switch>
</div>

---

🧭 Explicación de cada parte

<Link> - Los botones de navegación

jsx

<Link to="/peliculas">Ver Películas</Link>

• Reemplaza a <a href="...">

• NO recarga la página

• Cambia solo el contenido necesario

<Route> - Los carteles de dirección

jsx

<Route path="/peliculas">
  <ListaPeliculas />
</Route>

Significa: "Cuando la URL sea /peliculas, muestra el componente ListaPeliculas"

<Switch> - El selector

jsx

<Switch>
  <Route path="/uno">...</Route>
  <Route path="/dos">...</Route>
</Switch>

• Muestra SOLO la primera ruta que coincida

• Como un interruptor de luz: solo una prendida a la vez

Parámetros dinámicos - :id

jsx

<Route path="/pelicula/:id">
  <DetallePelicula />
</Route>

• :id es una variable

• /pelicula/1 → id = 1

• /pelicula/123 → id = 123

• Se usa para mostrar detalles específicos

---

🎮 Analogía Simple

Imagina tu app como una casa:

Elemento	En React Router	En la Casa
Menu	<Link>	Botones para cambiar de habitación
Habitaciones	<Route>	Dormitorio, Cocina, Baño
Selector	<Switch>	Solo puedes estar en UNA habitación a la vez
GPS	BrowserRouter	El plano completo de la casa

---

🔧 Pasos Prácticos (Resumen)

1. Crear componentes (tus "páginas")

2. Instalar React Router: npm install react-router-dom

3. Envolver app con <BrowserRouter> en index.js

4. Crear menú con <Link> en App.js

5. Definir rutas con <Switch> y <Route>

6. Probar navegando entre páginas

---

❓ Preguntas Frecuentes

¿Por qué no usar <a href>?

Porque <a> recarga toda la página. <Link> cambia solo el contenido necesario.

¿Qué significa exact?

jsx

<Route exact path="/">...</Route>

Muestra el componente SOLO cuando la URL es EXACTAMENTE /, no cuando es /otra-cosa.

¿Cómo paso información entre páginas?

Con parámetros:

jsx

// En el enlace
<Link to="/pelicula/5">Ver película 5</Link>

// En la ruta
<Route path="/pelicula/:id">...</Route>

// En el componente
// Puedes leer el ID con hooks (lo veremos después)

---

✅ Ejercicio Práctico

Crea una app simple con 3 "páginas":

1. Inicio - Un <h1> que diga "Bienvenido"

2. Acerca de - Un <p> con información

3. Contacto - Un formulario simple

Intenta:

• Navegar entre ellas sin recargar

• Ver la URL cambiando en el navegador

• Usar el botón "Atrás" del navegador

---

📝 Consejos para Principiantes

1. Empieza simple - 2-3 rutas primero

2. Nombra bien las rutas: /inicio, /productos, /contacto

3. Prueba cada paso - No esperes hasta terminar todo

4. Usa la consola del navegador para ver errores

5. Googlea los errores - Es normal tener problemas al empezar

---

🆘 Si te atoras

1. Revisa imports - ¿Importaste todo correctamente?

2. Verifica rutas - ¿Coinciden <Link to> y <Route path>?

3. Reinicia el servidor - A veces ayuda

4. Busca en la documentación oficial: reactrouter.com

---

Recuerda: ¡Todos empezamos desde cero! La navegación es uno de los conceptos más importantes en React. Una vez que lo entiendas, podrás crear aplicaciones completas. 🚀

¿Alguna parte no quedó clara? ¡Pregunta sin miedo!