Title: Actividad 20: Implemetacion de React Route
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad III - Framework de Desarrollo del Lado del Cliente

1) Objetivo

Que el estudiante implemente React Router para crear una segunda página dentro de su aplicación, configure rutas y permita navegar entre páginas usando Links o botones, según los ejemplos dados.

2) Instrucciones

A) Preparación del proyecto

1. Crea un proyecto de React con Vite o Create React App.
2. Instala React Router:

npm install react-router-dom


B) Crea los componentes de páginas

Debes crear dos archivos dentro de src/:

Home.jsx

export default function Home() {
  return <h1>Página de Inicio</h1>;
}


Acerca.jsx

export default function Acerca() {
  return <h1>Página Acerca</h1>;
}


C) Configura la navegación en App.jsx

Dentro de tu archivo principal App.jsx, implementa React Router utilizando alguno de los siguientes ejemplos obligatorios (puedes elegir 1, o combinar partes de todos).

🔹 Ejemplo 1 — Navegación básica con <Link>

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Inicio</Link> |{" "}
        <Link to="/acerca">Acerca</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/acerca" element={<Acerca />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;


🔹 Ejemplo 2 — Navegación con botones (useNavigate)

import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";
import Home from "./Home";
import Acerca from "./Acerca";

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

  return (
    <div>
      <button onClick={() => navigate("/")}>Ir a Inicio</button>
      <button onClick={() => navigate("/acerca")}>Ir a Acerca</button>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <NavigationButtons />

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/acerca" element={<Acerca />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;


🔹 Ejemplo 3 — Menú persistente en todas las páginas

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

function App() {
  return (
    <BrowserRouter>
      <header style={{ padding: "10px", background: "#eee" }}>
        <h2>Mi Sitio</h2>
        <nav>
          <Link to="/">Inicio</Link> |{" "}
          <Link to="/acerca">Acerca</Link>
        </nav>
      </header>

      <main style={{ padding: "20px" }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/acerca" element={<Acerca />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
}

export default App;


D) Comportamiento esperado

- Al entrar a / debe verse la página Home.
- Al entrar a /acerca debe verse la página Acerca.
- Debe existir una forma visible de navegar entre ambas:
  - Links o botones.
- La navegación debe realizarse sin recargar la página completa.

E) Evidencia a entregar

Incluye en un PDF:

1. Captura del código del App.jsx donde aparezcan:
  - <BrowserRouter>
  - <Routes> y <Route>
  - <Link> o useNavigate
2. Captura de la página Home en el navegador.
3. Captura de la página Acerca en el navegador.
4. Una explicación breve (3–4 líneas) sobre:
  - Cómo configuraste las rutas.
  - Cómo creaste la navegación.

3) Método de entrega

Subir un PDF con todas las capturas y explicaciones solicitadas.

1) Objetivo

Que el estudiante implemente React Router para crear una segunda página dentro de su aplicación, configure rutas y permita navegar entre páginas usando Links o botones, según los ejemplos dados.

2) Instrucciones

A) Preparación del proyecto

1. Crea un proyecto de React con Vite o Create React App.
2. Instala React Router:

npm install react-router-dom


B) Crea los componentes de páginas

Debes crear dos archivos dentro de src/:

Home.jsx

export default function Home() {
  return <h1>Página de Inicio</h1>;
}


Acerca.jsx

export default function Acerca() {
  return <h1>Página Acerca</h1>;
}


C) Configura la navegación en App.jsx

Dentro de tu archivo principal App.jsx, implementa React Router utilizando alguno de los siguientes ejemplos obligatorios (puedes elegir 1, o combinar partes de todos).

🔹 Ejemplo 1 — Navegación básica con <Link>

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Inicio</Link> |{" "}
        <Link to="/acerca">Acerca</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/acerca" element={<Acerca />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;


🔹 Ejemplo 2 — Navegación con botones (useNavigate)

import { BrowserRouter, Routes, Route, useNavigate } from "react-router-dom";
import Home from "./Home";
import Acerca from "./Acerca";

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

  return (
    <div>
      <button onClick={() => navigate("/")}>Ir a Inicio</button>
      <button onClick={() => navigate("/acerca")}>Ir a Acerca</button>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <NavigationButtons />

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/acerca" element={<Acerca />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;


🔹 Ejemplo 3 — Menú persistente en todas las páginas

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

function App() {
  return (
    <BrowserRouter>
      <header style={{ padding: "10px", background: "#eee" }}>
        <h2>Mi Sitio</h2>
        <nav>
          <Link to="/">Inicio</Link> |{" "}
          <Link to="/acerca">Acerca</Link>
        </nav>
      </header>

      <main style={{ padding: "20px" }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/acerca" element={<Acerca />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
}

export default App;


D) Comportamiento esperado

- Al entrar a / debe verse la página Home.
- Al entrar a /acerca debe verse la página Acerca.
- Debe existir una forma visible de navegar entre ambas:
  - Links o botones.
- La navegación debe realizarse sin recargar la página completa.

E) Evidencia a entregar

Incluye en un PDF:

1. Captura del código del App.jsx donde aparezcan:
  - <BrowserRouter>
  - <Routes> y <Route>
  - <Link> o useNavigate
2. Captura de la página Home en el navegador.
3. Captura de la página Acerca en el navegador.
4. Una explicación breve (3–4 líneas) sobre:
  - Cómo configuraste las rutas.
  - Cómo creaste la navegación.

3) Método de entrega

Subir un PDF con todas las capturas y explicaciones solicitadas.