Creación de Rutas Dinámicas con React Router DOM 6

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

Aprender a crear rutas dinámicas en tu aplicación de React puede parecer un reto, pero con React Router DOM, el proceso se vuelve intuitivo y manejable. Comenzamos eliminando el código de ejemplo generado por Create React App y seguimos por importar los componentes esenciales de React Router DOM.

¿Cuáles componentes son necesarios para iniciar?

El punto de partida para trabajar con rutas en React es decidir qué tipo de enrutador se va a utilizar. Puedes elegir entre BrowserRouter, HashRouter y MemoryRouter. En nuestro caso, optamos por HashRouter porque facilita el despliegue en GitHub Pages. Además, necesitas importar Routes y Route para definir y gestionar las rutas.

¿Cómo implementamos las rutas en un componente?

Insertar rutas en tu aplicación requiere de un encuadre adecuado dentro del componente principal:

import { HashRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/blog" element={<BlogPage />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </HashRouter>
  );
}

¿Cuál es la estructura necesaria para los componentes de página?

Para cada ruta, se debe crear un componente correspondiente. Aquí tienes un ejemplo sencillo para el componente HomePage:

import React from 'react';

export const HomePage = () => {
  return <h1>Home Page</h1>;
};

Repite el mismo patrón para los otros componentes, como BlogPage y ProfilePage, asegurándote de cambiar el nombre del componente y el contenido que retornarás adecuadamente.

¿Qué importancia tienen los componentes Routes y Route?

El componente Routes, anteriormente conocido como Switch, permite definir las rutas que harán que partes de la aplicación cambien dinámicamente. Dentro de Routes, los componentes Route se encargan de renderizar el componente adecuado basado en el path especificado.

¿Cómo manejar rutas no encontradas?

Es crucial para la experiencia de usuario gestionar rutas no encontradas. Se logra mediante la adición de un Route que coincide con path="*", asegurando así que cualquier URL indefinida muestre un componente de NotFoundPage.

¿Qué papel juega un componente común como el menú?

Tener un componente como Menu que permanezca visible en todas las rutas es esencial para la navegación. Este componente debería estar dentro del HashRouter, pero fuera de los componentes Routes, permitiendo acceso a la información de navegación:

import React from 'react';

export const Menu = () => {
  return (
    <nav className="navbar">
      <h1>Menu</h1>
      {/* Aquí irían los enlaces de navegación */}
    </nav>
  );
};

¿Cómo aseguramos que todos los componentes tengan acceso a la navegación?

Colocar el menú dentro del HashRouter garantiza que, al igual que los componentes de ruta, tenga acceso a la información del proveedor de navegación para gestionar rutas más avanzadas y autenticaciones.

¡Listo! No olvides que a medida que construyes tus aplicaciones, experimentarás con opciones como el Link y NavLink de React Router. Estos componentes serán fundamentales en próximas lecciones para mejorar tu aplicación y hacer la navegación más intuitiva y dinámica. Continúa adelante y explora las inmensas posibilidades que React Router DOM te ofrece para tus proyectos.