React Router: Guía práctica para navegar entre páginas en React 🚀

React Router: cómo moverte entre páginas sin perderte 🧭

React Router es una de esas herramientas que no sabes cuánto la necesitas hasta que la usas. Si tu aplicación tiene más de una vista, ya es hora de añadirla.

🚀 Instalación

Instalar React Router es muy sencillo. Desde tu proyecto React, abre la terminal y ejecuta:

npm install react-router-dom

O, si usas Yarn:

yarn add react-router-dom

💡 Consejo: asegúrate de tener React 18 o superior, ya que React Router 6 se apoya en sus nuevas APIs.

---

🧩 Configuración básica

Imagina que tienes dos páginas: Home y About. Tu estructura podría ser así:

src/
 ├── App.jsx
 ├── Home.jsx
 └── About.jsx

En tu archivo App.jsx, configura las rutas de esta forma:

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Inicio</Link> | <Link to="/about">Acerca de</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

🎯 Con esto, ya puedes navegar entre las páginas sin recargar la aplicación.

---

🔗 Pasar valores por URL (parámetros dinámicos)

Supongamos que quieres mostrar el perfil de un usuario según su ID. Puedes definir una ruta dinámica así:

<Route path="/usuario/:id" element={<Usuario />} />

Y acceder a ella desde un enlace:

<Link to="/usuario/42">Ver perfil del usuario 42</Link>

En la página Usuario.jsx, puedes leer el valor con el hook useParams:

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

function Usuario() {
  const { id } = useParams();

  return <h2>Mostrando perfil del usuario con ID: {id}</h2>;
}

export default Usuario;

---

🧠 Ejemplo práctico completo

import { BrowserRouter, Routes, Route, Link, useParams } from "react-router-dom";

function Home() {
  return (
    <div>
      <h2>Página de inicio 🏠</h2>
      <Link to="/usuario/7">Ir al usuario 7</Link>
    </div>
  );
}

function Usuario() {
  const { id } = useParams();
  return <h3>Perfil del usuario: {id}</h3>;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/usuario/:id" element={<Usuario />} />
      </Routes>
    </BrowserRouter>
  );
}

✅ Simple, limpio y 100% funcional.

---

⚙️ Ventajas de usar React Router

• Navegación sin recargar la página (Single Page Application).
• Soporte para rutas dinámicas y anidadas.
• Control completo sobre la URL.
• Integración con hooks como useNavigate, useParams o useLocation.
• Facilita la gestión de layouts y componentes compartidos.

---

Si quieres saber más sobre React Router pásate por su página oficial https://reactrouter.com/

---

❓ FAQ

¿Qué es React Router?

React Router es una librería que permite manejar la navegación y las rutas en aplicaciones React, sin recargar la página completa.

¿Cómo se instala React Router?

Se instala fácilmente con el comando npm install react-router-dom, o yarn add react-router-dom si usas Yarn.

¿Puedo pasar valores por URL con React Router?

Sí, puedes pasar parámetros en la URL (por ejemplo /usuario/123) y leerlos con el hook useParams.

¿React Router funciona en Vite o Next.js?

Funciona perfectamente en proyectos creados con Vite o Create React App, pero en Next.js no se usa porque ya tiene su propio sistema de enrutamiento.