🛣️ React Router: navegación y rutas dinámicas en tus apps

🛣️ React Router: navegación y rutas dinámicas en tus apps

React Router es la librería estándar para manejar la navegación en aplicaciones React. Permite crear múltiples páginas o vistas dentro de una sola aplicación SPA (Single Page Application), sin recargar el navegador.

---

1️⃣ Instalación de React Router

Para comenzar, instala la librería con:

npm install react-router-dom
  

Luego importa los componentes necesarios desde react-router-dom.

---

2️⃣ Configuración básica de rutas

Un ejemplo sencillo de navegación con tres páginas: Inicio, Acerca y Contacto.

// App.js
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Inicio() {
  return <h2>🏠 Página de inicio</h2>;
}

function Acerca() {
  return <h2>ℹ️ Acerca de nosotros</h2>;
}

function Contacto() {
  return <h2>📞 Contáctanos</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav style={{ marginBottom: "10px" }}>
        <Link to="/" style={{ marginRight: "10px" }}>Inicio</Link>
        <Link to="/acerca" style={{ marginRight: "10px" }}>Acerca</Link>
        <Link to="/contacto">Contacto</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Inicio />} />
        <Route path="/acerca" element={<Acerca />} />
        <Route path="/contacto" element={<Contacto />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;
  

Inicio Acerca Contacto

Ejemplo visual de navegación con React Router.

---

3️⃣ Rutas dinámicas con parámetros

React Router permite definir rutas que reciben parámetros, por ejemplo para mostrar información de un usuario o producto específico.

// Perfil.js
import { useParams } from "react-router-dom";

function Perfil() {
  const { nombre } = useParams();
  return <h2>👤 Perfil de {nombre}</h2>;
}

// App.js
<Route path="/perfil/:nombre" element={<Perfil />} />
  

Al visitar /perfil/Juan, la app mostrará “👤 Perfil de Juan”.

👤 Perfil de Juan

---

4️⃣ Navegación programática

Puedes redirigir al usuario desde una función usando el hook useNavigate().

import { useNavigate } from "react-router-dom";

function BotonRedirigir() {
  const navigate = useNavigate();

  const irAInicio = () => {
    navigate("/");
  };

  return <button onClick={irAInicio}>Volver al inicio</button>;
}
  

---

5️⃣ Ventajas de usar React Router

• ✅ Navegación fluida sin recargar la página.
• ✅ Soporte para rutas dinámicas y anidadas.
• ✅ Integración sencilla con componentes React.
• ✅ Control total del historial del navegador.

---

6️⃣ Resumen

React Router es esencial para cualquier aplicación React moderna que necesite varias vistas o navegación dinámica. Permite crear experiencias fluidas y organizadas sin perder rendimiento.

← Volver al índice