El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos sobre las rutas anidadas en React utilizando React Router. Las rutas anidadas permiten crear una estructura de navegación más compleja y organizada, donde una ruta puede contener subrutas. Esto es especialmente útil para aplicaciones con múltiples niveles de navegación.

Objetivos de Aprendizaje

Comprender qué son las rutas anidadas y cuándo utilizarlas.
Configurar rutas anidadas en una aplicación React.
Navegar entre rutas anidadas utilizando React Router.

¿Qué son las Rutas Anidadas?

Las rutas anidadas permiten definir rutas dentro de otras rutas. Esto es útil para crear una estructura jerárquica en tu aplicación, donde una ruta principal puede tener varias subrutas. Por ejemplo, en una aplicación de comercio electrónico, podrías tener una ruta principal para "Productos" y subrutas para "Detalles del Producto", "Reseñas", etc.

Configuración de Rutas Anidadas

Para configurar rutas anidadas en React Router, sigue estos pasos:

Instalar React Router: Si aún no lo has hecho, instala React Router en tu proyecto.
```
npm install react-router-dom
```
Configurar el Router Principal: Define las rutas principales y las subrutas en tu aplicación.

Ejemplo Práctico

Vamos a crear una aplicación simple con rutas anidadas. La estructura de la aplicación será la siguiente:

/ - Página de inicio
/products - Página de productos
- /products/:id - Detalles del producto

Paso 1: Configuración del Router Principal

Primero, configura el router principal en tu aplicación. Crea un archivo App.js con el siguiente contenido:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import Products from './Products';
import ProductDetails from './ProductDetails';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/products">Products</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/products" component={Products} />
      </Switch>
    </Router>
  );
}

export default App;

Paso 2: Crear Componentes para las Rutas

Crea los componentes Home, Products y ProductDetails.

Home.js

import React from 'react';

function Home() {
  return <h2>Home Page</h2>;
}

export default Home;

Products.js

import React from 'react';
import { Route, Link, useRouteMatch } from 'react-router-dom';
import ProductDetails from './ProductDetails';

function Products() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Products Page</h2>
      <ul>
        <li><Link to={`${url}/1`}>Product 1</Link></li>
        <li><Link to={`${url}/2`}>Product 2</Link></li>
      </ul>

      <Route path={`${path}/:id`} component={ProductDetails} />
    </div>
  );
}

export default Products;

ProductDetails.js

import React from 'react';
import { useParams } from 'react-router-dom';

function ProductDetails() {
  let { id } = useParams();
  return <h3>Product Details for Product ID: {id}</h3>;
}

export default ProductDetails;

Explicación del Código

App.js: Configuramos el Router principal con dos rutas: / para la página de inicio y /products para la página de productos. Utilizamos Link para la navegación.
Products.js: Utilizamos useRouteMatch para obtener la ruta actual (url) y la ruta base (path). Definimos subrutas para los detalles del producto utilizando Route y Link.
ProductDetails.js: Utilizamos useParams para obtener el parámetro id de la URL y mostrar los detalles del producto correspondiente.

Ejercicio Práctico

Ejercicio 1: Añadir una Subruta para Reseñas de Productos

Añade una subruta para mostrar las reseñas de un producto en Products.js.
Crea un componente ProductReviews.js que muestre las reseñas del producto.

ProductReviews.js

import React from 'react';
import { useParams } from 'react-router-dom';

function ProductReviews() {
  let { id } = useParams();
  return <h3>Reviews for Product ID: {id}</h3>;
}

export default ProductReviews;

Products.js (Actualizado)

import React from 'react';
import { Route, Link, useRouteMatch } from 'react-router-dom';
import ProductDetails from './ProductDetails';
import ProductReviews from './ProductReviews';

function Products() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Products Page</h2>
      <ul>
        <li><Link to={`${url}/1`}>Product 1</Link></li>
        <li><Link to={`${url}/2`}>Product 2</Link></li>
      </ul>

      <Route exact path={`${path}/:id`} component={ProductDetails} />
      <Route path={`${path}/:id/reviews`} component={ProductReviews} />
    </div>
  );
}

export default Products;

Solución del Ejercicio

Hemos añadido una nueva subruta en Products.js para /products/:id/reviews.
Hemos creado el componente ProductReviews.js que muestra las reseñas del producto basado en el id de la URL.

Conclusión

Las rutas anidadas en React Router permiten crear una estructura de navegación jerárquica y organizada en tu aplicación. En este tema, hemos aprendido a configurar rutas anidadas y a navegar entre ellas utilizando React Router. Practica creando más rutas y subrutas para familiarizarte con este concepto.

En el próximo tema, aprenderemos sobre la navegación programática en React Router.

Rutas Anidadas

Objetivos de Aprendizaje

¿Qué son las Rutas Anidadas?

Configuración de Rutas Anidadas

Ejemplo Práctico

Paso 1: Configuración del Router Principal

Paso 2: Crear Componentes para las Rutas

Explicación del Código

Ejercicio Práctico

Ejercicio 1: Añadir una Subruta para Reseñas de Productos

Solución del Ejercicio

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa