Para crear aplicaciones de múltiples páginas en React, usamos React Router, una biblioteca que facilita la configuración de rutas y permite navegar entre diferentes componentes.

1. Instalación y configuración de React Router

Para instalar React Router, abre la terminal en tu proyecto de React y ejecuta:

1npm install react-router-dom

Después de instalarlo, importamos los componentes principales que usaremos para definir las rutas: BrowserRouter, Routes, y Route.

Configuración básica de React Router:

1import React from 'react';
2import { BrowserRouter, Routes, Route } from 'react-router-dom';
3import Inicio from './Inicio';
4import Sobre from './Sobre';
5import Contacto from './Contacto';
6
7function App() {
8  return (
9    <BrowserRouter>
10      <Routes>
11        <Route path="/" element={<Inicio />} />
12        <Route path="/sobre" element={<Sobre />} />
13        <Route path="/contacto" element={<Contacto />} />
14      </Routes>
15    </BrowserRouter>
16  );
17}
18
19export default App;

En este ejemplo:

• BrowserRouter envuelve toda la aplicación y permite que Routes y Route manejen la navegación.
• Routes contiene todas las rutas de la aplicación, que son definidas usando Route.
• Route establece la ruta (en path) y el componente que se mostrará en esa ruta (en element).

2. Rutas dinámicas y navegación

Podemos usar rutas dinámicas para crear páginas basadas en parámetros. Por ejemplo, si queremos una ruta /producto/:id, podemos acceder al parámetro id desde el componente Producto para mostrar información específica.

Ejemplo de ruta dinámica:

1import React from 'react';
2import { useParams } from 'react-router-dom';
3
4function Producto() {
5  const { id } = useParams(); // Recupera el parámetro "id" de la URL
6  return <h1>Producto ID: {id}</h1>;
7}
8
9// Configuración en App
10<Route path="/producto/:id" element={<Producto />} />

Aquí:

• useParams es un Hook que extrae los parámetros de la ruta.
• Al visitar /producto/5, Producto muestra Producto ID: 5.

3. Parámetros de ruta y nested routes

Parámetros de ruta nos permiten extraer partes de la URL y usarlas dentro del componente. Nested routes (rutas anidadas) son rutas dentro de otras rutas, útiles para tener secciones dentro de una página principal.

Ejemplo de nested routes:

1import { BrowserRouter, Routes, Route, Outlet, Link } from 'react-router-dom';
2
3function Perfil() {
4  return (
5    <div>
6      <h2>Perfil del Usuario</h2>
7      <nav>
8        <Link to="detalles">Detalles</Link>
9        <Link to="configuracion">Configuración</Link>
10      </nav>
11      <Outlet /> {/* Aquí se renderizan las rutas anidadas */}
12    </div>
13  );
14}
15
16function Detalles() {
17  return <p>Detalles del usuario</p>;
18}
19
20function Configuracion() {
21  return <p>Configuración del usuario</p>;
22}
23
24// Configuración en App
25<BrowserRouter>
26  <Routes>
27    <Route path="perfil" element={<Perfil />}>
28      <Route path="detalles" element={<Detalles />} />
29      <Route path="configuracion" element={<Configuracion />} />
30    </Route>
31  </Routes>
32</BrowserRouter>

En este ejemplo:

• Outlet es un marcador que muestra los componentes de las rutas anidadas (Detalles y Configuracion).
• Al navegar a /perfil/detalles, se muestra Detalles dentro de Perfil.

4. Ejercicio práctico: Creación de una aplicación de navegación multi-página

Vamos a crear una aplicación con tres páginas: Inicio, Servicios (con rutas dinámicas para diferentes servicios), y Contacto.

1. Estructura del proyecto: Crearemos tres componentes: Inicio, Servicios y Contacto. Dentro de Servicios, configuraremos rutas dinámicas para ver cada servicio por separado.

2. Código completo de la aplicación:

1import React from 'react';
2import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';
3
4// Componente Inicio
5function Inicio() {
6  return <h1>Bienvenido a nuestra aplicación</h1>;
7}
8
9// Componente Servicios con rutas dinámicas
10function Servicios() {
11  return (
12    <div>
13      <h1>Nuestros Servicios</h1>
14      <ul>
15        <li><Link to="desarrollo">Desarrollo Web</Link></li>
16        <li><Link to="diseño">Diseño Gráfico</Link></li>
17        <li><Link to="marketing">Marketing Digital</Link></li>
18      </ul>
19      <Outlet />
20    </div>
21  );
22}
23
24// Componente de servicio específico
25function Servicio() {
26  const { nombre } = useParams();
27  return <h2>Servicio: {nombre.charAt(0).toUpperCase() + nombre.slice(1)}</h2>;
28}
29
30// Componente Contacto
31function Contacto() {
32  return <h1>Ponte en contacto con nosotros</h1>;
33}
34
35// Componente principal App
36function App() {
37  return (
38    <BrowserRouter>
39      <nav>
40        <Link to="/">Inicio</Link>
41        <Link to="/servicios">Servicios</Link>
42        <Link to="/contacto">Contacto</Link>
43      </nav>
44      <Routes>
45        <Route path="/" element={<Inicio />} />
46        <Route path="servicios" element={<Servicios />}>
47          <Route path=":nombre" element={<Servicio />} /> {/* Ruta dinámica */}
48        </Route>
49        <Route path="/contacto" element={<Contacto />} />
50      </Routes>
51    </BrowserRouter>
52  );
53}
54
55export default App;

3. Explicación:
   • Navegación: Usamos enlaces (Link) para navegar entre Inicio, Servicios y Contacto.
   • Ruta dinámica: En Servicios, hemos creado una ruta dinámica con :nombre que muestra cada servicio según su nombre en la URL.
   • Uso de useParams: Servicio usa useParams para acceder al parámetro nombre y mostrar el nombre del servicio.
   • Nested routes: Outlet en Servicios permite que las rutas dinámicas (desarrollo, diseño, marketing) se rendericen dentro de Servicios.

Con esto, hemos creado una aplicación de navegación multi-página que usa rutas estáticas, dinámicas y anidadas, ofreciendo una experiencia de usuario completa y bien organizada en React.