Instalar React Router

 Vamos paso a paso con un ejemplo muy sencillo, solo 2 páginas usando React Router:

• Inicio → muestra la lista fakeApiData

• Contáctenos → página simple de contacto

Usaré React Router v6, que es la versión más usada hoy.

---

1️⃣ Instalar React Router

En tu proyecto React, ejecuta:

npm install react-router-dom

---

2️⃣ Estructura mínima del proyecto

src/
│── App.js
│── main.jsx   (o index.js)
│── pages/
│     ├── Home.jsx
│     └── Contact.jsx

---

3️⃣ Archivo principal (main.jsx o index.js)

Este archivo envuelve la app con el Router.

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

📌 BrowserRouter es el que habilita la navegación.

---

4️⃣ App.js (definición de rutas y navegación)

Aquí defines las páginas (routes) y los links.

App.js

import { Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import Contact from "./pages/Contact";

function App() {
  return (
    <>
      {/* Menú de navegación */}
      <nav style={{ padding: "10px", borderBottom: "1px solid #ccc" }}>
        <Link to="/" style={{ marginRight: "10px" }}>Inicio</Link>
        <Link to="/contacto">Contáctenos</Link>
      </nav>

      {/* Rutas */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contacto" element={<Contact />} />
      </Routes>
    </>
  );
}

export default App;

🧠 Claves importantes

• <Link to="/"> → navega sin recargar la página

• <Routes> → contenedor de rutas

• <Route path="/" element={<Home />}>

---

5️⃣ Página de Inicio (Home.jsx)

Aquí mostramos tu arreglo fakeApiData.

pages/Home.jsx

const fakeApiData = [
  { id: 1, name: "Juan" },
  { id: 2, name: "María" },
  { id: 3, name: "Pedro" }
];

function Home() {
  return (
    <div style={{ padding: "20px" }}>
      <h1>Página de Inicio</h1>

      <ul>
        {fakeApiData.map(persona => (
          <li key={persona.id}>
            {persona.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

📌 Aquí:

• map() recorre el arreglo

• key={persona.id} es obligatorio en listas

---

6️⃣ Página Contáctenos (Contact.jsx)

pages/Contact.jsx

function Contact() {
  return (
    <div style={{ padding: "20px" }}>
      <h1>Contáctenos</h1>
      <p>Puedes escribirnos a:</p>
      <p><strong>contacto@ejemplo.com</strong></p>
    </div>
  );
}

export default Contact;

---

7️⃣ ¿Cómo funciona la navegación?

1. Entras a http://localhost:5173/
   → Muestra Inicio y la lista de nombres

2. Das clic en Contáctenos
   → Cambia la URL a /contacto
   → Renderiza el componente Contact

3. ❌ No hay recarga de página (SPA)

---

8️⃣ Resumen rápido

Elemento	Para qué sirve
BrowserRouter	Habilita rutas
Routes	Contenedor de rutas
Route	Define una página
Link	Navegación sin recargar

---

Si quieres, en el siguiente paso puedo enseñarte:

• 🔹 Rutas con parámetros (/usuario/1)

• 🔹 Navegación con botones (useNavigate)

• 🔹 Proteger rutas (login)