Rutas dinámicas con React Router DOM y useParams

¿Cómo renderizar el mismo componente en rutas dinámicas con React Router?

En el mundo del desarrollo web, es crucial entender cómo gestionar y modificar las vistas dinámicamente basado en la URL actual. Al hablar de React Router DOM, uno de los aspectos más poderosos es su capacidad para manejar rutas dinámicas, lo que facilita la personalización de componentes según lo que dicte la URL. En esta guía aprenderemos a usar hooks como useParams para aprovechar al máximo esta funcionalidad.

¿Qué es un slug y cómo afecta las rutas dinámicas?

• Slug: Es una parte de la URL que actúa como un identificador único para las páginas o elementos de contenido en una aplicación, generalmente al final de la URL como platzi.com/clases/como-aprender-react.
• Gracias al slug podemos cambiar el contenido interno de un componente manteniendo la misma estructura. El slug permite al componente entender qué datos cargar y cómo consultar el backend para obtener información diferente para cada vista.

¿Cómo crear un componente dinámico?

Empezamos creando una lista de publicaciones para un blog. El componente base será similar para cada entrada de blog, cambiando solo su contenido dependiendo del slug. Este componente se llamará BlogPost y hará uso del React hook useParams para este objetivo. Veamos cómo se hace:

// Ejemplo del hook useParams en el componente BlogPost
import { useParams } from 'react-router-dom';

const BlogPost = () => {
  const { slug } = useParams();  // Obtiene el slug desde la URL

  // Lógica para obtener el post correcto basado en el slug
  const post = blogData.find(post => post.slug === slug);

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
      <p>{post.author}</p>
    </div>
  );
};

export default BlogPost;

¿Cómo implementar y usar el arreglo de datos?

Para manejar la información de varias publicaciones, creamos un arreglo llamado blogData, el cual puede ser fácilmente exportado e importado en otros componentes. Su ventaja radica en que podemos simular una consulta a una API, lo cual es un escenario común en aplicaciones reales:

// Ejemplo del archivo blogData.js
export const blogData = [
  {
    title: "¿Qué es React?",
    slug: "que-es-react",
    content: "React es el mejor framework de JavaScript.",
    author: "Juan de Sen"
  },
  {
    title: "¿Qué es Vue?",
    slug: "que-es-vue",
    content: "Vue es un framework progresivo.",
    author: "Otro autor"
  }
];

Uso del componente BlogPage

En BlogPage, deberíamos asegurarnos de que todas las publicaciones estén disponibles en forma de enlaces. Vamos a utilizar React para iterar sobre blogData y mostrar la información favorita de los usuarios.

// Código para mostrar una lista de enlaces de publicaciones en BlogPage
import { Link } from 'react-router-dom';
import { blogData } from './blogData';

const BlogPage = () => {
  return (
    <ul>
      {blogData.map(post => (
        <li key={post.slug}>
          <Link to={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
};

export default BlogPage;

¿Cómo configurar rutas dinámicas con React Router DOM?

Al definir las rutas en nuestro archivo App.js, utilizamos los dos puntos para indicar que lo que sigue es una variable, similar a un parámetro. Así podemos capturar páginas según el slug proporcionado.

// Configuración de rutas dinámicas en App.js
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import BlogPage from './BlogPage';
import BlogPost from './BlogPost';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/blog" element={<BlogPage />} />
        <Route path="/blog/:slug" element={<BlogPost />} />  // Ruta dinámica
      </Routes>
    </Router>
  );
}

export default App;

Retos y recomendaciones

• Evitar rutas manuales: Al usar parámetros y slugs evitamos crear rutas manualmente, lo que simplifica el mantenimiento del código.
• Pruebas y Depuración: Realiza pruebas exhaustivas para asegurar que cada slug lleva al contenido correcto. Utiliza herramientas como React DevTools para verificar el estado y los props de los componentes.
• Consistencia de Datos: Asegúrate de que cada slug sea único para evitar problemas de duplicidad en las URLs.

Animamos a seguir explorando todas las potencialidades que ofrece React, y cómo frameworks y librerías complementarias pueden potenciar aún más tus habilidades en desarrollo web. ¡Continúa aprendiendo y experimentando con estas técnicas para llevar tus aplicaciones al siguiente nivel!