React - de Cero a Profesional

Enrutamiento en React

React Router

Ahora vamos a explorar un tema crucial en el desarrollo de aplicaciones web con React: la navegación. Para eso, utilizaremos React Router, una biblioteca poderosa y flexible para manejar rutas en tus aplicaciones React. Piensa en React Router como el sistema de navegación GPS para tu aplicación: te ayuda a viajar entre vistas o «páginas» sin perder el camino.

¿Qué es React Router?

React Router es una librería que te permite manejar rutas de manera declarativa en tu aplicación React. Con React Router, puedes configurar rutas que correspondan a diferentes componentes, permitiendo que la aplicación se comporte como una web de múltiples páginas sin necesidad de recargar la página completa.

Configuración Básica de React Router

Para comenzar con React Router, primero necesitas instalarlo en tu proyecto:

				
					npm install react-router-dom

Luego, puedes configurar tus rutas básicas. Aquí hay un ejemplo simple de cómo configurar React Router en una aplicación:

				
					import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Explicación del Código

  1. BrowserRouter: Este componente envuelve tu aplicación y la dota de capacidades de enrutamiento.
  2. Link: Actúa como un ancla (<a>), permitiéndote navegar entre tus componentes sin recargar la página. Utiliza to para especificar la ruta.
  3. Switch: Se utiliza para agrupar múltiples rutas. Renderiza el primer <Route> que coincide con la ubicación actual.
  4. Route: Define una ruta y el componente que se debe renderizar cuando la ruta es accedida.

Uso de Parámetros de Ruta

A menudo, necesitarás enviar información a través de la ruta, como un ID de usuario. React Router permite manejar esto fácilmente a través de parámetros de ruta.

javascri
				
					<Route path="/user/:id" component={User} />

En tu componente User, puedes acceder a este parámetro usando useParams de React Router:

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

function User() {
  let { id } = useParams(); // Captura el parámetro id de la ruta
  return <h2>User ID: {id}</h2>;
}

Ventajas de Usar React Router

  • User Experience Mejorada: La navegación se siente fluida y rápida sin recargas de página.
  • Mantenimiento del Estado: Permite mantener el estado de la aplicación incluso cuando el usuario navega entre páginas.
  • SEO Amigable: Aunque es una SPA (Single Page Application), puedes configurarla para que sea más amigable con SEO.

Parámetros y rutas dinámicas

Esta funcionalidad es como un mapa del tesoro que te guía a través de diferentes caminos y destinos según las pistas (parámetros) que se te proporcionen. Imagina que estás construyendo una aplicación donde cada usuario tiene su propia página o necesitas mostrar detalles específicos de un producto. Los parámetros dinámicos hacen esto posible y sencillo.

¿Qué son las Rutas Dinámicas?

Las rutas dinámicas son aquellas en las que parte de la URL puede cambiar según el contexto. Por ejemplo, en una URL como /user/john, «john» es un parámetro que puede variar para mostrar la página de diferentes usuarios. React Router permite manejar estas rutas dinámicamente, pasando estos parámetros como parte de la URL.

Configurando Rutas Dinámicas en React Router

Primero, asegúrate de tener React Router instalado y configurado. Aquí te muestro cómo puedes configurar una ruta dinámica:

				
					import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

const UserProfile = ({ match }) => (
  <div>
    <h2>User: {match.params.username}</h2>
  </div>
);

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/user/john">John's Profile</Link>
          <Link to="/user/jane">Jane's Profile</Link>
        </nav>

        <Switch>
          <Route path="/user/:username" component={UserProfile} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Explicación del Código

  1. Link: Define enlaces que llevan a las rutas dinámicas. Al hacer clic en estos, el parámetro username en la URL cambia.
  2. Route: La prop path contiene el parámetro :username, que es una variable. Cualquier cosa que pongas en esa parte de la URL se pasará al componente UserProfile como parte de match.params.

Uso de useParams para Acceder a Parámetros

A partir de React Router v5.1, puedes hacer uso del Hook useParams para obtener parámetros de ruta de manera más sencilla y directa:

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

function UserProfile() {
  const { username } = useParams();
  return <h2>User: {username}</h2>;
}

Casos de Uso Comunes

  • Perfiles de Usuarios: Como hemos visto, cada usuario podría tener su propia URL basada en su nombre de usuario.
  • Detalles de Productos: Para un sitio de comercio electrónico, cada producto podría tener su propia URL con un ID único del producto, como /product/12345.
  • Filtrado y Búsqueda: Puedes pasar parámetros para filtrar contenido, como en /search?keyword=React.

Ventajas de las Rutas Dinámicas

  • Flexibilidad: Permite que la aplicación maneje diferentes datos y comportamientos bajo una misma estructura de ruta.
  • Escalabilidad: Facilita la adición de nuevas rutas y parámetros sin grandes cambios en el código existente.
  • Mejor Experiencia de Usuario: Proporciona URLs que son fáciles de entender y navegar, lo cual es crucial para la usabilidad y el SEO.

Recursos