React Router en Acción: Navegación Dinámica en React

React Router es una biblioteca de enrutamiento para aplicaciones React que nos permite gestionar la navegación de manera declarativa. En lugar de depender de recargar la página para cambiar entre diferentes vistas, React Router permite la creación de aplicaciones de una sola página (SPA) fluidas y dinámicas.

Repositorio en GitHub

Este artículo parte del siguiente repositorio de ejemplo. Si deseas explorar y probar el código por ti mismo, te recomiendo descargar el repositorio de React + Vite. Para hacerlo, simplemente ejecuta el comando npm install y depsues npm run dev para ejecutar el proyecto.

Instalación y Configuración

Para dar el primer paso, necesitarás instalar React Router en tu proyecto. Dirígete a tu terminal y ejecuta el siguiente comando:

npm install react-router-dom

Importación

No olvides que al instalar un paquete, este queda registrado en el archivo package.json. Sin embargo, es crucial importarlo para poder utilizarlo en tu proyecto. Esta tarea la realizaremos en el componente principal de nuestra aplicación; en nuestro caso, se trata del archivo main.jsx.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { HashRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <HashRouter>
    <App />
    </HashRouter>
  </React.StrictMode>,
)

Expliquemos

• Linea 5: importamos HashRouter componente de react-router-dom que nos le dira a nuestra aplicacion que queremos utilizar rutas con hash(#)
• Linea 9 y 11: Encapsulan nuestr aplicacion App mediante el componente HashRouter

Agregando router

Es el momento de crear nuestro archivo de rutas. Este archivo será responsable de gestionar las rutas que dirigen a nuestras páginas (componentes). Para lograrlo, crearemos una carpeta llamada routes dentro de src y, en su interior, el componente AppRouter.jsx.

import { Navigate, Route, Routes } from 'react-router-dom';
import Home from '../pages/Home';
import News from '../pages/News';
import Contact from '../pages/Contact';
import About from '../pages/About';
    
    const NotFound = () => <h1>404: Not Found</h1>;
    
    function AppRouter() {
        return (
            <>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="*" element={<Navigate to="/404" />} />
                    <Route path="404" element={<NotFound />} />
    
                    <Route path="home" element={<Home />} />
                    <Route path="news" element={<News />} />
                    <Route path="contact" element={<Contact />} />
                    <Route path="about" element={<About />} />
                </Routes>
            </>
        );
    }
    
export default AppRouter;

Expliquemos

Hemos añadido un componente funcional llamado AppRouter. Este componente se encargará de cargar cada ruta, y cada una de ellas estará definida mediante el componente Route, el cual está encapsulado por otro componente llamado Routes.

• Línea 1: Importamos los componentes necesarios de react-router-dom que nos permitirán generar nuestro router.
• Línea 7: Creamos un componente funcional que se utilizará cuando no tengamos una ruta definida.
• Línea 13: Establecemos una ruta para cuando el usuario acceda a nuestro dominio principal, por ejemplo, www.midominio.com. En este caso, se cargará el componente Home.
• Línea 14: Realiza una redirección a la ruta 404 definida en la siguiente línea.
• Línea 15: Crea una ruta 404 que apuntará a nuestro componente NotFound.
• Línea 17: Establece una nueva ruta home que cargará la página (componente) Home.
• Línea 18-20: Crea rutas para cada componente, siguiendo un patrón similar al establecido en la línea 17.

Usemos el router

En este punto, hemos configurado el archivo AppRouter.jsx, pero aún no está en uso. Para incorporarlo a nuestra aplicación, necesitamos importarlo en nuestro archivo principal (App.jsx) y establecer la navegación para cada ruta. Veamos cómo hacerlo.

import './App.css'
import AppRouter from './routes/AppRouter'
import { NavLink } from 'react-router-dom'
    
function App() {
    
      return (
        <>
          <ul>
            <li><NavLink to='home'>Home</NavLink></li>
            <li><NavLink to="news">News</NavLink></li>
            <li><NavLink to="contact">Contact</NavLink></li>
            <li><NavLink to="about">About</NavLink></li>
          </ul>
          <AppRouter />
        </>
      )
}
    
export default App

Expliquemos

La verdadera magia se desata en la línea 15, donde cargamos el componente AppRouter que creamos previamente en el archivo AppRouter.jsx, tal como fue importado en la línea 2. Este componente actúa como el conductor principal de nuestra aplicación, gestionando las rutas y dirigiendo el flujo de navegación. Es en este punto donde la estructura de nuestro enrutador cobra vida, y todas las configuraciones y rutas que hemos definido anteriormente se integran para ofrecer una experiencia de usuario fluida y dinámica.

Linea 10-13: realizamos un cambio en las etiquetas, reemplazándolas por NavLink. Este componente de react-router-dom nos permite enlazar nuestras rutas definidas en AppRouter. Es importante tener en cuenta que NavLink, en segundo plano, agrega la clase .active al elemento del menú que coincide con la ruta actual. Esta clase es responsable de proporcionar el fondo verde al elemento del menú activo.

Resultado

Para ver el resultado final de esta entrada, visita el repositorio en la rama router-funcional.